Question

所以我有这个jQuery事件触发文本阴影：

$(".leftColumn").hover(function (){
  $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)");
},function(){});

问题是，一旦将文本阴影应用于h2，即使我停止悬停在leftColumn上，它仍会保持应用状态。如何让文字阴影消失？

我试过了：

$(".leftColumn").hover(function (){
  $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)");
},function(){
  $(".leftColumn h2").css("text-shadow", "none");
});

但所做的一切都是阻止文本阴影被应用。

Answer 1

正如@Jaromanda X所提到的那样，在CSS方面处理这种情况会更好。

.leftColumn:hover h2 {
  text-shadow: 0px 2px 3px rgba(0, 0,   0, 0.5);
}

<div class="leftColumn">
  <h2>I'm H1</h2>
</div>

Answer 2

$(".leftColumn h2").css("text-shadow", "unset");

如果必须使用jquery来执行此操作，请使用'unset'而不是'none'。 text-shadow没有'none'值。

Answer 3

您可以使用mouseover和mouseout事件。还要在css中定义类属性并使用addClass＆amp; removeClass个属性。使用jquery .css会为元素添加内联样式。

或者也可以使用css :hover

＆＃13;

$(".leftColumn").on('mouseover', 'h2', function() {
  $(this).addClass('addShadow');
});
$(".leftColumn").on('mouseout', "h2", function() {
  $(this).removeClass('addShadow');
});

＆＃13;

.addShadow {
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftColumn">
  <h2> Hovering element</h2>

</div>

＆＃13;

如何阻止jQuery悬停事件应用css text-shadow？

3 个答案: