Мышь над зависанием не работает с использованием jQuery

-1

У меня есть встроенная функция jQuery mouse over hover на моем сайте (click here and scroll down to images with coloured blocks). Я заметил, что изображение состояния зависания не видно, хотя я играл с Z-индексом. Что вызывает эту проблему?Мышь над зависанием не работает с использованием jQuery

Ниже приведен фрагмент моего кода.

<div class="shirt-block" style="background:#333334;"> 
    <figure> 
     <img class="shirt col-img-inner" src="img/B0713011sf2.jpg" alt="alt"/> 
    </figure> 
</div> 

.shirt-block { 
    width:47%; 
    float:left; 
    margin:0; padding:0; 
    margin-left:2%; 
    min-width:200px; 
    max-width:600px; 
    position:relative; 
} 

.shirt-block > figure { margin:0; padding:0; height:100%; position:absolute; top:0; right:0; width:100%; } 


.shirt-sizer { width:100%; /* same as figure width */ } 

.shirt { 
    width:100%; 
    position:absolute; 
    top:0; 
    right:0; 
} 

.shirt-hover { 
    background:url(http://www.lybstore.com/img/home-hover-bg.png); 
    background-size:cover; 
    position:absolute; 
    top:0; right:0; 
    z-index:100; 
    width:100%; 
    height:100%; 
    opacity:0; 
} 


$('figure').append('<div class="shirt-hover"/>'); 

var $sizer = $("<img/>", {src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAMAAADXLxypAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACBJREFUeNrtwTEBAAAAwiD7p14Hb2AAAAAAAAAAAABcAiWAAAEKyWyqAAAAAElFTkSuQmCC"}).addClass("shirt-sizer"); 

$('.shirt-block').append($sizer); 

$('.shirt-hover').hover(function(){ 
    $(this).stop().animate({opacity:1},200); 
},function(){ 
    $(this).stop().animate({opacity:0},200); 
});

источник

2013-06-01 NewBoy

На вашем сайте есть JS, который, кажется, предназначен для события jquery hover, но он закомментирован. Не могли бы вы проверить и добавить сценарий к сообщению? – Fallexe

@Fallexe не уверен, что это вы меня понизили, но причина, по которой он был прокомментирован, - это bcos, я тестирую ответы ниже – NewBoy

Это работает: >> вместо: $('.shirt-hover').hover(...) < <

$('.shirt-block img').mouseenter(function(){ 
    var $imgHover = $(this).next('.shirt-hover'); 
    $imgHover.width($(this).width()).height($(this).height()).stop().animate({opacity:1},200); 
}); 
$('.shirt-hover').mouseout(function(){ 
    $(this).stop().animate({opacity:0},200,function(){$(this).height(0)}); 
});

и удаления: z-index:100; в CSS для .shirt-hover это бесполезно и сделать его пройти через нижнюю DIV.

источник

2013-06-01 10:57:35

См. Обновленный ответ –

yup! он что-то делает – NewBoy

Он что делает? Его работа или нет? –

Просто замените

.shirt-hover {

.shirt:hover {

Так оно и должно быть, как это

.shirt:hover { 
     background:url(http://www.lybstore.com/img/home-hover-bg.png); 
     background-size:cover; 
     position:absolute; 
     top:0; right:0; 
     z-index:100; 
     width:100%; 
     height:100%; 
     opacity:0; 
    }

источник

2013-06-01 10:31:45 Gautam3164

Конечно, но при этом не отображается изображение наведения, оно просто показывает фон div? – NewBoy

@NewBoy Итак, не могли бы вы удалить: наведите псевдокласс на свой css, чтобы мы могли проверить, что происходит? –

@ Gautam3164 sure – NewBoy

Псевдо селекторы работают так: .shirt:hover, .shirt-hover может Неве r работа.

источник

2013-06-01 10:32:45

Псевдо селекторы всегда использовать двоеточие (:), никогда прочерк (-). Поэтому shirt:hover будет работать как замена.

Вместо jQuery's .hover, вы можете использовать .mouseenter и .mouseleave.

источник

2013-06-01 10:52:36 samdy1

нет, здесь здесь не сработает –

@NewBoy проверить редактирование, это может помочь :) – samdy1

@ samdy1 Нет, что не работает – NewBoy

Мышь над зависанием не работает с использованием jQuery

ответ

Смежные вопросы