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; 
    }