如何使用Javascript在元素上显示鼠标悬停？

我现在正在开发一个Javascript来显示鼠标悬停

以下是我的Javascript代码：

<script>
$(document).ready(function(){
$('.playlogo').mouseover(function () {
    $('.company-image-overlay').show();
}).mouseout(function () {
    $('.company-image-overlay').hide();
});
});
</script>

现在的问题是，当我将鼠标悬停在一个

上时，它会用

在所有其他元素上显示悬停效果

问题是-我如何才能使Javascript显示只停留在一个元素上，我现在用鼠标停留在这个元素上

---

提前谢谢

您需要参考此并获取其子项：

$(this).find('.company-image-overlay').show();

---

您需要引用悬停的特定

.playlogo

，然后使用

.children（）

从该上下文中遍历。*我使用的是

.children（）

，因为我们只遍历一个级别。下面是一个工作示例：

---

也许可以用CSS来实现这一点

.company-image-overlay{
    display:none;
}

.playlogo:hover .company-image-overlay{
     display:inherit;
}

---

谢谢，这很有效！但它没有其他问题。现在它显示了悬停，但没有悬停在元素上，但是当我悬停两次时，它变好了。如何修复此错误？@tonlystruck添加您的css

。公司图像覆盖

a

显示：无
$(this).find('.company-image-overlay').show();

$('.playlogo').each(function() {
    $(this).mouseover(function() {
        $(this).children('.company-image-overlay').show();
    });
    $(this).mouseout(function() {
        $(this).children('.company-image-overlay').hide();
    });
});

.company-image-overlay{
    display:none;
}

.playlogo:hover .company-image-overlay{
     display:inherit;
}