如何在链接旁边的鼠标悬停时更改自定义图标图像？

debugcn 发表于 Dev

输液

如何获得自定义图标图像，以便在其旁边的链接悬停时进行更改？每个链接的每个图像都明显不同。就我而言，我有两个不同颜色的图像，一个是黑色，然后当您将鼠标悬停在其旁边的链接上时，我需要将其更改为绿色。可以仅使用CSS完成此操作，还是需要使用JS？

编辑：更好地解释。当用户将鼠标悬停在“链接1”上时，其.home-icon应变为绿色，而当将“链接2”悬停时，其应变为.tshirt-icon绿色等。

JS FIDDLE DEMO

HTML：

<ul>
    <li><a href="#"><i class="home-icon"></i>Link 1</a></li>
    <li><a href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

CSS：

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.home-icon {
    background: url(http://s1.postimg.org/gk5fbl6vv/home_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
        background: url(http://s2.postimg.org/43870q29h/home_green.png) no-repeat;
    }

}

.tshirt-icon {
    background: url(http://s30.postimg.org/61bqc12fh/tshirt_black.png) no-repeat;
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 20px;

    &:hover {
        background: url(http://s17.postimg.org/3x9qzn8sb/tshirt_green.png) no-repeat;
    }
}

JS FIDDLE DEMO

Praveen Kumar Purushothaman

您需要使用直接后代选择器：

a:hover > i {
    background:green;
}

因为这比其他方法更具特异性。

片段：

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.home-icon {
  background: url("http://s1.postimg.org/gk5fbl6vv/home_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .home-icon {
    background: url("http://s2.postimg.org/43870q29h/home_green.png") no-repeat;
}

.tshirt-icon {
  background: url("http://s30.postimg.org/61bqc12fh/tshirt_black.png") no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-right: 20px;
}

a:hover .tshirt-icon {
  background: url("http://s17.postimg.org/3x9qzn8sb/tshirt_green.png") no-repeat;
}

<ul>
  <li><a id="link-1" href="#"><i class="home-icon"></i>Link 1</a></li>
  <li><a id="link-2" href="#"><i class="tshirt-icon"></i>Link 2</a></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。