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

html-css04

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。不懂可以再问我

一般这个都是通过换取不同的图片来进行变色处理的，但是你可以选取上面图片都为透明，只有边框的图片，然后默认给背景为白色的，然后但鼠标经过上面的时候，然后再进行更换背景颜色，这种方法我也没有试过，但是建议选择更换图片，这样对于用户体验度也好一点，希望对你有帮助！

上述样式一般通过取消默认的list标记，然后以图片的形式实现；但是，也可以直接设置li的样式实现，思路是在li标签下嵌套span标签，然后将li的样式设置为红色，字号较大，而span为正常的样式。下面给出后者的实例演示：

创建Html元素

<div class="box">

<span>通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色，且显示较大：</span><br>

<div class="content">

<ul class="test">

  <li><span>Glen</span></li>

  <li><span>Tane</span></li>

  <li><span>John</span></li>

  <li><span>Ralph</span></li>

</ul>

</div>

<div class="content">

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>John</li>

  <li>Ralph</li>

</ul>

</div>

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

li{margin:5px 0}

ul.test li{color:redfont-size:30px}

ul.test li span{display:inline-blockcolor:blackfont-size:16px}

观察对比效果