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

Answer 2

如果你想在悬停在图像上时改变图像的不透明度，那么你必须使用这个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>

Answer 3

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

Answer 4

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

Answer 5

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

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

此处的演示演示：http://jsfiddle.net/jfriend00/LnLpM/

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

Jquery悬停问题与图像和文本

5 个答案: