zindex unclickable ссылка, когда фоновый div выходит на передний план с помощью jquery? - PullRequest
Новая
       12

zindex unclickable ссылка, когда фоновый div выходит на передний план с помощью jquery?

0 голосов
/ 17 мая 2011

У меня есть несколько «статей», представляющих собой изображение с текстом в базовом элементе div. При наведении курсора на статью jQuery выводит текст div вперед. Однако я не могу щелкнуть по любому тексту в div, поэтому я предполагаю, что есть некоторая путаница с zindex и позиционированием.

Я не совсем уверен, что происходит, хотя div визуально выше и должен быть выше с zindex, но это не работает!

JS Bin: 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');
        }    
    );

});

1 Ответ

1 голос
/ 17 мая 2011

Сделано несколько небольших модификаций и все работает.Примечательно, что я удалил классы «выше» и «ниже», поскольку они не нужны, и я сохранил все 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>
...