当jquery将背景div带到前面时，zindex无法链接的链接？

我有一些'文章'是一个图像与底层div中的文字。将鼠标悬停在文章上时，jQuery将文本div放在前面。但是，我无法点击div中的任何文本，所以我认为zindex和定位存在一些混淆。当jquery将背景div带到前面时，zindex无法链接的链接？

我不能完全肯定发生了什么，虽然作为格在视觉上面，必须与Z-索引是上面，但它不工作！

JS斌：http://jsbin.com/ukari4

非常感谢！

代码：

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    article { 
    margin: 25px; 
    position: relative; 
    display: block; 
    float: left; 
} 

article>div.frontimage { 
    position: relative; 
    top: 0; 
    left: 0; 
} 

article>div.entry { 
    background: red; 
    position: absolute; 
    top: 3px; 
    left: 5px; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
} 

.below { 
    z-index: -100; 
} 

.above { 
    z-index: 1000; 
} 
</style> 
</head> 
<body> 
    <article> 
    <div class="frontimage"><img src="http://placehold.it/350x500" alt="" width="350" height="500" /></div> 

    <div class="entry"> 
     <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>  
</article> 

<article> 
    <div class="frontimage"><img src="http://placehold.it/300x300" alt="" width="300" height="300" /></div> 

    <div class="entry"> 
     <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>  
</article> 
</body> 
</html>

JS：

var $j = jQuery.noConflict(); 

$j(document).ready(function(){ 

    $j('article').hover(
     function(){ 
      $j(this).children('.frontimage').addClass('below'); 
      $j(this).children('.entry').addClass('above'); 
     }, 
     function() { 
      $j(this).children('.frontimage').removeClass('below'); 
      $j(this).children('.entry').removeClass('above'); 
     }  
    ); 

});

来源

2011-05-17 waffl

做了一些小的修改和它的作品。值得注意的是，我删除了“上面”和“下面”类，因为它们不是必需的，我保留所有的z-索引为正。似乎已经完成了这个诀窍。

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    article { 
    margin: 25px; 
    position: relative; 
    display: block; 
    float: left; 
} 

article>div.frontimage { 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

article>div.entry { 
    background: red; 
    position: absolute; 
    top: 3px; 
    left: 5px; 
    height: 100%; 
    width: 100%; 
    z-index: 5; 
} 
</style> 
</head> 
<body> 
    <article> 
    <div class="frontimage"><img src="http://placehold.it/350x500" alt="" width="350" height="500" /></div> 

    <div class="entry"> 
     <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>  
</article> 

<article> 
    <div class="frontimage"><img src="http://placehold.it/300x300" alt="" width="300" height="300" /></div> 

    <div class="entry"> 
     <h2><a href="http://www.google.ca">Test Link</a></h2> 
    </div>  
</article> 
<script> 
    var $j = jQuery.noConflict(); 

    $j(document).ready(function(){ 

     $j('article').hover(
      function(){ 
       $j(this).children('.frontimage').css('z-index', '1'); 
      }, 
      function() { 
       $j(this).children('.frontimage').css('z-index', '10'); 
      }  
     ); 

    }); 
</script> 
</body> 
</html>

来源

2011-05-17 15:19:10

很好用。我不知道我的初始代码究竟发生了什么！非常感谢！ – waffl 2011-05-17 15:47:56

我认为这与z-index的负值有关。我通常尽量避免这样做。 – 2011-05-17 15:50:01

啊。这可能是对的，当检查元素时，周围的文章似乎始终处于顶端，我一定会注意避免负向z索引！再次感谢。 – waffl 2011-05-17 16:24:31

当jquery将背景div带到前面时，zindex无法链接的链接？

回答

相关问题