jQuery div隐藏并显示，z-index问题和mouseover / mouseout问题

问题描述

| 我做了一个简单的div悬停控件，使用jquery显示和隐藏介绍单词。 我已经在stackoverflow.com中提出了一个问题 @Steve Perks和@patorjk回答了我。谢谢他们两个。 但是现在，我还有其他问题。 IE中的索引问题。如何使ѭ0成为顶层？ 如果我在

div.hover

中添加一些超级链接，如何修改js代码，以便仅将

div.hover

和

div.title

都滑出，

div.hover

将被隐藏（我需要单击链接） 非常感谢。 我在这里更新了代码http://jsfiddle.net/3jGdm/1/ 的HTML

<div id=\"body\">
    <div id=\"main\">
        <div class=\"box\">
            <div class=\"title\">1</div>
            <div class=\"hover\">this is number 1,when you hover to the box content,show <a href=\"\">something</a> here.</div>
            <p>Box 1</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">2</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 2</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">3</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 3</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">4</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 4</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">5</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 5</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">6</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 6</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">7</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 7</p>
        </div>
        <div class=\"box\">
            <div class=\"title\">8</div>
            <div class=\"hover\">this is number 1,show <a href=\"\">something</a> here.</div>
            <p>Box 8</p>
        </div>
    </div>
</div>

的CSS

*{margin:0;padding:0;border:0;}
#body{width:100%;height:100%;background-color:#fff;}
#main{width:800px;height:400px;margin:0 auto;background-color:#999;}
.box{float:left;width:180px;height:150px;margin:9px;border:1px solid #666;display:inline-block;position:relative;}
.title{font-size:32px;line-height:150px;text-align:center;}
.hover{display:none;position:absolute;width:300px;background-color:#9C9;border:1px solid #666;z-index:10;font-size: 16px;}
.oy .hover{right:0;}
p{text-align:center;background-color:#333;}

jQuery的

jQuery(document).ready(function(){
    $(\'.box:nth-child(4n+4)\').addClass(\'oy\');
    $(\".title\").mouseover(
    function () {
      $(this).parent(\'.box\').children(\".hover\").show();
    }),$(\".title\").mouseout(
    function () {
      $(this).parent(\'.box\').children(\".hover\").hide();
    }
);
});

    

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）