如何设置图像的不透明度各自的DIV它是在

Question

我有以下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> 

我想在左边进行动画不透明度的图像由35％时，在文本右移，然后在鼠标离开时恢复正常。

因此，例如，如果我将鼠标悬停在Home上，应该为家庭图像设置动画。

我有以下的JQuery它有类似的功能：

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

如何让这个每个文本将在图像上相同的DIV

Answer 1

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

.closest()只工作会遍历最接近元素的dom，在这种情况下它将是父级元素（您也可以在这里使用.parent（））。然后.find()将遍历它的孩子找到元素。其余部分与您的代码相同。这将确保动画仅影响与您悬停的文字相关联的图像。

Answer 2

试试这个

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