Изменение непрозрачности с помощью jQuery - PullRequest
Новая
       45

Изменение непрозрачности с помощью jQuery

5 голосов
/ 08 июня 2011

У меня есть 9 элементов в сетке, я хочу, чтобы у всех элементов была непрозрачность по 0,5 для каждого элемента, и только при наведении курсора на элемент div / item и все, что внутри, имеет непрозрачность 1,0.

Вот JS 

$('.gallery-single').css({ opacity: 0.5 });

$('.gallery-single a').mouseover(function(){
    $('.gallery-single-title', this).css('display', 'block');
        $('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
    $('.gallery-single-title', this).css('display', 'none');
        $('.gallery-single', this).css({ opacity: 0.5 });
});

HTML 

<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>

Все элементы имеют непрозрачность 0,5 при загрузке, но непрозрачности не изменяются при фокусировке.Что я тут не так делаю?

Ответы [ 2 ]

6 голосов
/ 08 июня 2011

Попробуйте: 

$('.gallery-single a').hover(function(){
    $(this).closest('.gallery-single-title').css('display', 'block');
        $(this).closest('.gallery-single').css({ opacity: 1 });
},
function(){
    $(this).closest('.gallery-single-title').css('display', 'none');
        $(this).closest('.gallery-single').css({ opacity: 0.5 });
});

Рабочий пример .

1 голос
/ 08 июня 2011

Проблема в том, что .gallery-single является предком якоря (т.е. он находится вне якоря).Формат $(selector, this) ищет селектор в пределах this.Вместо этого используйте .closest(): 

$(this).closest('.gallery-single').css(...);

Sidenote : jQuery выдает это предупреждение о mouseover (также относится к mouseout):

Этот тип события может вызвать много головных болей из-за пузырьков событий.Например, когда указатель мыши перемещается по элементу Inner в этом примере, ему будет отправлено событие mouseover, а затем накапливается до Outer.Это может вызвать наш связанный обработчик при наведении мыши в неподходящее время.См. Обсуждение .mouseenter () для полезной альтернативы.

Вы должны использовать mouseenter (и mouseleave) вместо (илиhover() функция, которая удобно сочетает в себе оба).

...