在使用 SASS 进行前端样式开发的过程中，经常会遇到 :hover 样式不生效的情况，这很可能是由于样式层级结构或者选择器优先级的问题导致的。本文将会探讨这个问题和解决办法，希望对大家有所帮助。
问题描述
当我们在 SASS 中为一个元素设置 :hover 样式，却发现在页面中鼠标悬浮在该元素上时却没有任何效果时，这就是 :hover 样式不生效的情况。
解决办法
1. 检查样式层级结构
首先，要确认所设置的 :hover 样式是否被其他更具体的选择器覆盖了。如果是这种情况，我们需要增加样式的优先级或者调整样式层级结构来让 :hover 样式生效。
例如：
-- -------------------- ---- -------
---------- -
------- ------
------ ------
----------------- --------
------- -
----------------- --------
-
-
---------- ------ -
------- ------
------ ------
----------------- -----
-以上代码中，.container .inner 的样式比 .container 更加具体，因此如果 .container .inner 没有设置 :hover 样式，那么 .container 中设置的 :hover 样式就不会生效。我们可以将 :hover 样式移到 .container .inner 中，或者增加 .container:hover 的优先级来解决。
2. 使用 !important
在 SASS 中，我们可以使用 !important 关键字来强制覆盖其他优先级的样式，确保目标样式生效。
例如：
-- -------------------- ---- -------
---------- -
------- ------
------ ------
----------------- --------
------- -
----------------- ------- -----------
-
-
---------- ------ -
------- ------
------ ------
----------------- -----
-以上代码中，.container:hover 的优先级比 .container .inner 更高，同时设置了 !important，确保 :hover 样式生效。
然而，过度使用 !important 会导致样式层级结构变得混乱，不利于后期的维护。
3. 检查 HTML 层级结构
如果样式层级结构已经正确，仍然无法解决 :hover 样式不生效的问题，我们需要检查 HTML 结构。
如果目标元素的 HTML 结构与我们预期的不同，那么选择器可能无法匹配到相应的元素，导致样式无法生效。
例如：
<div class="container">
<div class="inner">
<a href="#">Click Me!</a>
</div>
</div>-- -------------------- ---- ------- ---------------- - ----------------- -------- - ------ - - ------ ----- - ------ ------- - ------ ----- -
以上代码中，因为我们在 .inner 上设置了样式，但是其中并没有包含目标元素 <a>，因此只有 <a> 上设置的 color 样式生效，而 :hover 样式却无法生效。我们可以将 :hover 样式移到 <a> 上，或者将 <a> 置于 .inner 中来解决。
总结
在 SASS 开发中，：hover 样式无法生效的问题可能来自于样式层级结构、选择器优先级或者 HTML 结构等多个方面。需要我们在开发过程中严格检查层级结构和选择器优先级，同时加强对 HTML 结构的理解和掌握。对于出现无法解决的麻烦，我们可以使用 !important 关键字来解决，但是需要谨慎使用，否则可能会带来其他问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64657989968c7c53b0627db8