2

尝试使此 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>

有任何想法吗？非常感激。

4

5 回答 5

1

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

$('.smallarttxt').hover(function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0');
}, function() {
    $('.smallartcov').css('color', 'white');
    $('.smallartcov').css('opacity', '0.5');
});
于 2012-04-24T05:13:11.443 回答
0

您是否尝试将 JS应用于包含所有信息的.hover完整元素？artistg也许将 JS 应用到包含的 div 会使您的鼠标悬停在文本上，而不是“离开”悬停状态。光标可能仍会变成 I 型梁，但只要您仍然获得悬停不透明度效果，您可以使用 CSS 将光标保持在您想要的任何位置，以免破坏图像悬停。

于 2012-04-24T05:17:19.480 回答
0

只需将悬停功能向上移动到父容器，它将自动包含图像和文本：

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

在这里工作演示：http: //jsfiddle.net/jfriend00/LnLpM/

仅供参考，我删除了颜色的设置，因为它似乎没有做任何事情，无论是否悬停都是一样的。

于 2012-04-24T05:24:52.050 回答
0

如果您想在将鼠标悬停在图像上时更改图像的不透明度，那么您必须使用此 jquery 代码

<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>
于 2012-04-24T05:08:41.077 回答
0

您可以设置z-index: 1;为 smallartcov 类，但文本也会变暗。

于 2012-04-24T05:12:02.850 回答