javascript - 如何阻止 jQuery 悬停事件应用 css 文本阴影？

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>