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

Question

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

我在stackoverflow.com

@Steve心动已经问一个问题，@patorjk回答我。谢谢他们。

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

1. IE中的索引问题。如何在顶层制作div.hover？

2. 如果我在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以及：

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

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

Answer 2

为了固定的z索引张问题在IE中，您需要在激活或徘徊时将z索引应用于.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; 
    }