jQuery fadeTo之后，CSS：hover停止工作

Question

加载页面3秒后，div“ #menu”变得不透明。

$(function() {
    $('#menu').delay(4000).show().fadeTo('slow', 0.2);
});

在我的CSS中，我有一个：hover函数，这样一旦鼠标悬停在div上，div就不再不透明了：

#menu:hover {
    opacity: 1;
    transition: 1s;
}

jQuery正常工作-3秒钟后div变得不透明。但是：hover不再起作用。为什么会这样，有人可以帮助我解决问题吗？谢谢！

Answer 1

问题是因为设置fadeTo()将导致以内联样式在元素上设置最终的不透明度值。这意味着您无法轻松地从外部样式表中的规则覆盖该样式。一种方法是使用!important，但这不是最佳实践，应避免使用。

另一种方法是添加一个类来淡化元素，允许CSS的transition执行不透明度淡化，然后使用选择器特异性覆盖:hover上的样式。试试这个：

$(function() {
  setTimeout(function() {
    $('#menu').addClass('faded');
  }, 3000);
});

#menu {
  transition: opacity 0.3s;
}

#menu.faded {
  opacity: 0.2;
}

#container #menu:hover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="menu">Menu</div>
</div>

请注意，此处的关键是在#container类上使用:hover前缀以使选择器更加具体。您可以使用适合您的DOM结构的任何父元素，这只是一个示例。

Answer 2

jQuery fadeTo方法正在将opacity: 0.2的内联样式写入#menu。由于how specificity is calculated，这很难覆盖。

您应该在4秒钟延迟后将辅助类（.faded）应用于#menu，以达到褪色效果。

这样，您仍然可以在普通CSS中的#menu:hover上覆盖不透明样式。

$('#menu').delay(4000).queue('fx', function() {
  $(this).addClass('faded');
});

#menu {
  transition: 1s;
}

#menu:hover {
  opacity: 1;
}

.faded {
  opacity: 0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">Menu</div>