Jquery hover issue with image and text

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

Answer 2

if you want to change the opacity of image when hover on the image then you have to use this jquery code

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

Answer 3

You can set z-index: 1; to smallartcov class, but then the text is also dimmed.

Answer 4

Have you tried applying the JS .hover to full element artistg containing all the info? Perhaps applying the JS to the containing div would make it so your mouse hovering over the text not "leave" the hover state. The cursor may still turn into an I-beam but as long as you still get the hover opacity effect, you can use CSS to keep the cursor to whatever you want as to not disrupt the image hover.

Answer 5

Just move the hover function up to the parent container and it will automatically include both image and text:

$('.artistg').hover(function() {
        $(this).find('.smallartcov').css('opacity', 0);
    }, function() {
        $(this).find('.smallartcov').css('opacity', .5);
    }
);

Working demo here: http://jsfiddle.net/jfriend00/LnLpM/

FYI, I removed the setting of the color since it didn't seem to be doing anything and was the same whether hovered or not.