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

如何解决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();
    }
);
});

    

解决方法

        1）似乎工作正常，但是此代码可以保证它处于最上面：

$(\'div.hover\').css(\'z-index\',\'1000\');

2）您只需为hover div添加一个mouseover和mouseout函数：

$(\'div.hover\').mouseover(
    function(){
        $(this).show();
    }
);
$(\'div.hover\').mouseout(
    function(){
        $(this).hide();
    }
);

http://jsfiddle.net/3jGdm/6/     ,        为了解决IE中的z-index问题，您需要在活动或悬停时将z-index应用于

.box

容器。 有关示例，请参见http://jsfiddle.net/3jGdm/7/。 更新的js：

jQuery(document).ready(function() {
    $(\'.box:nth-child(4n+4)\').addClass(\'oy\');
    $(\".title\").mouseover(

    function() {
        $(this).parent(\'.box\').addClass(\"indexFix\").children(\".hover\").show();
    }),$(\".title\").mouseout(

    function() {
        $(this).parent(\'.box\').removeClass(\"indexFix\").children(\".hover\").hide();
    });
});

注意更新的类：

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

和新类：

.indexFix {
    z-index: 10;
    }