Hovering over the text My will cause the image myicon.png to fade out and back in:
<div class="mmItemStyleChild">
<img src="theImages/myicon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mMW" class="vertAlign mmm">My</span>
</div>
$('.mmm').hover(function () {
$(this).closest('div').find('img').first().stop().animate({ 'opacity': .35 });
}, function () {
$(this).closest('div').find('img').first().stop().animate({ 'opacity': 1 });
});
I attempted to do the same for the section below, but it is not working as intended:
<div class="mBtnMidS mBtnMidStyle">
<div>
<img id="mbS1" src="theImages/services_icon.png" class="mBtnIcon" />
</div>
<div>
<span id="mbS" class="mbBtnText">Services</span>
</div>
</div>
$('.mbBtnText').hover(function () {
$(this).closest('div').find('img').first().stop().animate({ 'opacity': .55 });
}, function () {
$(this).closest('div').find('img').first().stop().animate({ 'opacity': 1 });
});
To modify the above code to achieve a similar fade animation from the parent DIV (using either class 'mBtnMidS' or 'mBtnMidStyle') for the image, how can I go about it?