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;}中添加类

Answer 2

只需使用以下给定的css来悬停子元素 css：

#bestServiceBike:hover .btn.btn-primary{
  background-color:#2639ff;
}
.serviceContent:hover .btn.btn-primary{
  background-color:#2639ff;
  color:#fff;
}

查看这个小提琴：https://jsfiddle.net/vn6txgyc/

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

2 个答案: