Geek Answers Handbook

Change opacity with jQuery

I have 9 elements in the grid, I want all the elements to have 0.5 opacity for each element, and only when they hung it should have a div / item element and everything inside with 1.0 error.

Here is 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>

All objects have an opacity of 0.5 when loading, but the opacity does not change when focusing. What am I doing wrong here?

+5
source share
2 answers

The problem is what .gallery-singleis the ancestoranchors (i.e., out of anchor). The format is $(selector, this)looking for a selector inside this . Use instead .closest():

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

Sidenote: jQuery mouseover ( mouseout):

- . , , mouseover , Outer. mouseover . . .mouseenter() .

mouseenter ( mouseleave) ( hover(), ).

+1

:

$('.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 });
});

.

+6

More articles:


All Articles