Question

所以我有一个默认图标，我希望它能够在悬停时点亮活动状态。由于某种原因，我不能让它工作，我想尽可能使用CSS。 THX

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
    }
}

Answer 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/

Answer 2

我认为你的效果会像this JSFiddle？

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

Answer 3

我无法用css弄明白，我知道有一种方法，但我使用了jquery。因为我的图像有两个类，一个是默认的，一个是活动的。 THX

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

如何更改悬停css上的图标

3 个答案: