Jquery 悬停问题与图像和文本

Jquery hover issue with image and text

本文关键字：文本 图像 悬停 问题 Jquery      更新时间：2023-09-26

尝试让这个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>

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

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

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

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

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

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

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

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

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

如果要在将鼠标悬停在图像上时更改图像的不透明度，则必须使用此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>
相关文章：