Блог

Главная - Вопросы по программированию - недоступная ссылка zindex, когда фоновый div выводится на передний план с помощью jquery?

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

#jquery #html #css #positioning #z-index

#jquery #HTML #css #позиционирование #z-индекс

Вопрос:

У меня есть несколько «статей», которые представляют собой изображение с текстом в базовом 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:

Внес несколько небольших изменений, и это работает. Примечательно, что я удалил классы ‘above’ и ‘below’, поскольку они не нужны, и я сохранил все 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>

Комментарии:

1. Отлично работает. Интересно, что именно происходило с моим исходным кодом! Хотя большое спасибо!

2. Я думаю, это связано с отрицательным значением z-индекса. Обычно я стараюсь этого не делать.

3. Ах. Вероятно, это верно, при проверке элемента окружающая статья всегда казалась каким-то образом сверху, я обязательно приму к сведению, чтобы избежать отрицательных z-индексов! Еще раз спасибо.