javascript - 图像和文本的 Jquery 悬停问题

Question

在尝试使此 jquery 代码工作时遇到问题。这个想法是当图像突出显示时不透明度应该改变。现在它正在使用 smallartcov 类标签来更改不透明度。问题是它上面有一些文字。所以文本算作鼠标离开图像区域，即使它从未离开过。我该如何解决这个问题？

http://169.231.6.197/vathom/artist.php是托管测试对象的地方。如果你看@最右边的图片，你就会明白我的意思。这是我们的 html:

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

连同以下 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>

有什么想法吗？非常感谢。

Answer 1

你能为文本添加悬停并很好地控制不透明度吗？这将解决您面临的问题。我已经通过添加以下代码对其进行了测试，

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