如何更改悬停css上的图标答案

【问题标题】：how to change icon on hover css如何更改悬停css上的图标
【发布时间】：2015-09-17 11:51:34
【问题描述】：

所以我有一个默认图标，我希望它能够在悬停时亮起。出于某种原因，我无法让它工作，如果可能的话，我想使用 css。谢谢

HTML

<ul class='nav nav-main nav-sidebar'>
 <li role='presentation'>
   <a href='javascript:void(0)'>
    <i class='pull-left fu fu-lg fu-parents'></i>
    Parents
</a>

CSS

li {
    .hidden-on-hover {
        display: inherit;
    }
    .visible-on-hover {
        display: none;
    }
}
li:hover {
    .hidden-on-hover {
        display: none;
    }
    .visible-on-hover {
        display: inherit;
    }
    i.fu.fu-parents {
        background: image_url("icons/navigation/default/parents.svg") center center no-repeat;
        background-size: contain
    }
    i.fu.fu-parents.active {
        background: image_url("icons/navigation/active/parents-active.svg") center center no-repeat;
        background-size: contain
    }
}

【问题讨论】：

标签： html css hover

【解决方案1】：

你没有在:hover上应用你的样式

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover

i.fu.fu-parents:hover {
  background: image_url("icons/navigation/active/parents-active.svg");
}

这样做，你应该得到想要的行为。

也帮自己一个忙，了解更多有关 HTML/CSS 的知识。你不应该使用<ul> 来作为导航，而且你的类名比需要的多。这些事情将使您的网站更难维护，并且需要额外的工作，例如您的role=presentation 来支持屏幕阅读器。这是一个免费的在线课程，会教你扎实的基础知识：https://dash.generalassemb.ly/

【讨论】：

感谢您的提示，我实际上接手了别人的项目。

【解决方案2】：

我认为你想要像this JSFiddle 这样的效果？

a {color: red;}
ul{list-style-type: none;}
a:hover > i {color: blue;}

【讨论】：

【解决方案3】：

我无法用 css 解决这个问题，我知道有办法，但我用 jquery 代替。因为我的图像有两个类，一个是默认的，一个是活动的。谢谢

$("i").hover(
  function () {
    $(this).addClass('active');
  }, 
  function () {
    $(this).removeClass('active');
  }
  );

【讨论】：

您可能错过了我的回答中缺少active 类。如果你的 CSS 需要一个从未应用的类，你的 CSS 将无法工作。
如果此active 类仅用于应用悬停样式，则不应存在。