zindex lien unclickable lorsque fond div est mis en avant avec jquery?

J'ai un certain nombre d '«articles» qui sont une image avec le texte dans une div sous-jacente. En survolant l'article, jQuery amène le texte div au premier plan. Cependant, je suis incapable de cliquer sur n'importe quel texte dans la div, donc je suppose qu'il y a une certaine confusion avec le zindex et le positionnement.zindex lien unclickable lorsque fond div est mis en avant avec jquery?

Je ne suis pas entièrement sûr de ce qui se passe, car la div est visuellement au-dessus et doit être au-dessus avec le zindex, mais ça ne marche pas!

JS Bin: http://jsbin.com/ukari4

Merci beaucoup!

code:

<!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'); 
     }  
    ); 

});

Source

2011-05-17 waffl

fait quelques petites modifications et ça marche. Notamment, j'ai supprimé les classes 'above' et 'below', car elles ne sont pas nécessaires, et j'ai gardé tous les z-index positifs. Il semble avoir fait l'affaire.

<!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>

Source

2011-05-17 15:19:10

Fonctionne très bien. Je me demande ce qui se passait exactement avec mon code initial! Merci beaucoup! – waffl

Je pense que cela avait à voir avec la valeur négative de l'index z. J'essaie habituellement d'éviter cela. –

Ah. C'est probablement juste, lors de l'inspection de l'élément, l'article environnant a toujours semblé être sur le dessus en quelque sorte, je vais certainement prendre note pour éviter les z-index négatifs! Merci encore. – waffl

zindex lien unclickable lorsque fond div est mis en avant avec jquery?

Répondre

Questions connexes