Question

我做了一个简单的div悬停控件，显示和隐藏用jquery引入单词。

我已经在stackoverflow.com

中提出了一个问题

@Steve Perks和@patorjk回答了我。谢谢他们两个。

但现在，我还有一些问题。

IE中的索引问题。如何在顶层设置div.hover？
如果我在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, when you hover to the box content, 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, when you hover to the box content, 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, when you hover to the box content, 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, when you hover to the box content, 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, when you hover to the box content, 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, when you hover to the box content, 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, when you hover to the box content, 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();
    }
);
});

Answer 1

1）它似乎工作正常，但这段代码可以保证它是最重要的：

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

2）您只需为悬停div添加mouseover和mouseout函数：

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

http://jsfiddle.net/3jGdm/6/

Answer 2

为了解决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;
    }

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

2 个答案: