CSS中鼠标移上去图标变色怎么弄？我把灰色这个写成图片插在HTML里面，在CSS中写那个橙色的怎么没反应呢？

html-css06

CSS中鼠标移上去图标变色怎么弄？我把灰色这个写成图片插在HTML里面，在CSS中写那个橙色的怎么没反应呢？,第1张

首先，你这边的图标是用图片实现的话，那就必须更改图片，我写个例子：

<ul>

<li class="ico1"></li>

<li class="ico2"></li>

<li class="ico3"></li>

<li class="ico4"></li>

</ul>

<style type="text/css">

.ico1{

background: url(huise-ico1)

}

.ico1:hover{

background: url(chengse-ico1)

}

</style>

这边我只写了一个。还有3个没写。你可以根据这个改上自己需要的。

PS：还有一种跟快捷的方法，如果你有兴趣的话，可以去搜索下iconfont。不懂可以再问我

这个再编程中，很常见，也有很多种写法，介绍两种。

1.图标用img标签显示，再img标签点击后，更改img的src属性，改变图标，将原来的空心换成红心的图片。

2.图标用css控制，设置background-image显示空心的背景图片，这里图片最好是png的，点击后换成红心的图片。

无论哪种，注意记录用户的点击行为，下次进去后直接显示红心的图标。比如百度app的点赞，要记录用户再哪个帖子点赞了，下次该用户再查看这个帖子的时候，默认显示点赞后的图标。