jquery - 当用户悬停在按钮的父容器上时，如何在按钮上添加悬停效果？

Question

https://codepen.io/nisofwareengineer/pen/jONLWxw

我想要达到的目标:

通常，当您将鼠标悬停在按钮上时，会出现悬停效果，按钮的颜色会略有变化。

我希望当用户将鼠标悬停在该按钮的父 div 上时应用此效果。

在这种情况下，类为“serviceContent”的 div 是父 div。在这些父 div 中是按钮。这些是蓝色按钮，上面写着“了解更多”

到目前为止，我已经尝试过使用这个:

$('.serviceContent').mouseover(function() {
  $(this).find('.btn').trigger('mouseover')
})

它似乎不起作用 - 是否有其他可以触发的东西会产生与用户将鼠标悬停在按钮上相同的效果？

提前致谢

Answer 1

试试这个

$(document).ready(function(){
$(".serviceContent").mouseover(function(){
$("button").addClass("button-hover");
});
$(".serviceContent").mouseout(function(){
$("button").removeClass("button-hover");
});
});

在 css 中添加类 .button-hover{color: red;}