Question

Having issues trying to get this jquery code to work. The idea is that the opacity should change when the image is highlighted. Right now it is using the smallartcov class tag to change the opacity. The issue is that there is some text on top of it. So the text counts as the mouse leaving the image area even though it never did. How can i get around this?

http://169.231.6.197/vathom/artist.php is where the test subject is being hosted. If you look @ the right most picture you can see what I mean. Here is the html we have on it:

<div class="artistg">
    <div class="smallartcov"></div><span class="smallarttxt">702</span>
    <img class="smallartpic" src="images/df.jpg" />
</div>  

along with the following jquery:

<script type="text/javascript">
$('.smallartcov').hover(function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0');
}, function() {
    $(this).css('color', 'white');
    $(this).css('opacity', '0.5');
});
</script>

Any ideas? Much appreciated.

Answer 1

Can you add hover for the text and control the opacity well. This would fix the issue you are facing. I have tested it by adding the below code,

$('.smallarttxt').hover(function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0');
}, function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0.5');
});