为什么我的图标没有显示在我的网页上，我该如何实现悬停效果？

Question

我有一个像这样的 html 元素：

<div className="sidebar-nav-main-links">
  <Link to="/home">
  <i><div id="home-icon"></div></i> 
  <p>Home</p>
  </Link> 
</div>

我的 css 看起来像这样：

i {
  #home-icon {
    background-image: image_url('clear-home-icon.png');
    width: 20px;
  }
}

但是我无法显示图像，更不用说悬停效果了。关于这是为什么的任何想法？我也想在悬停时更改图像。

Answer 1

最好使用内容而不是背景图片。

示例：

<i id="home-icon"></i>

css:

 #home-icon   {
  content: url("https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png");
  width: 20px;
}

 #home-icon:hover   {
  content: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4");
  width: 20px;
}

jsfiddle: https://jsfiddle.net/2pb1oevj/

Answer 2

您可以将以下 CSS 与您的 HTML 一起使用：

#home-icon   {
  background: url("abc.jpg");
  width: 20px;
  height: 16px;
  display: block;
}

 #home-icon:hover   {
  background: url("xyz.jpg");
  width: 20px;
  height: 16px;
  display: block;
}

您可以相应地调整图标的height/width。

参考：

为什么我的图标没有显示在我的网页上，我该如何实现悬停效果？

Why is my icon not displaying on my webpage and how do I do a hover effect?

html

css

icons