Clever Geek Handbook

How to set the opacity of the image corresponding to the DIV in

I have the following HTML:

<div class="mmItemStyleChild">
    <img src="theImages/home.png" class="mIcon vertAlign mmm1" id="mH1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mH" class="vertAlign mmm">Home</span>
</div>
<div class="mmItemStyleChild">
    <img src="theImages/MakeAnAppt_icon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mMW" class="vertAlign mmm">My WESTMED</span>
</div>
<div class="mmItemStyleChild">
    <img src="theImages/FindaProvider_icon.png" class="mIcon vertAlign mmm1" id="mFP1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mFP" class="vertAlign mmm">Find a Provider</span>
</div>

I would like the image on the left to be animated with 35% opacity when the text on the right hovers and then reverts to normal when the mouse leaves.

So, for example, if I'm over Home

, the home image should be animated.

I have the following JQuery doing something like this:

$(".mmm {home}").hover(function(){
    $("{.mmm1 [HOME]}").stop().animate({"opacity": .35}); //on text hover set it at 35% opacity
},function(){
    $("{.mmm1 [HOME]}").stop().animate({"opacity": 1}); //on text hover leave set it to default opacity
});

How to make each text only work on the image with the same DIV

+3


source to share


2 answers 


$('.mmm').hover(function(){
    $(this).closest('div').find('.mIcon').stop().animate({'opacity': .35});
}, function(){
    $(this).closest('div').find('.mIcon').stop().animate({'opacity': 1});
});


.closest()

will intersect the dom for the closest element, which in this case will be the parent (you can also use .parent () here). Then it .find()

will cross it to find the element. The rest is the same as your code. This will make sure the animation only affects the image associated with the text you're hovering.

+4


source


try it



$('.mmItemStyleChild span').hover(function() {
    var $img = $(this).siblings('.mm1'); // define image object;

    $($img).stop().animate({
        opacity: .35
    });
}, function() {
    var $img = $(this).siblings('.mm1'); // define image object;
    $($img).stop().animate({
        opacity: 1
    });
});
+1


source






More articles:


All Articles