css样式设置了字体颜色，怎么让鼠标经过覆盖颜色

html-css033

css样式设置了字体颜色，怎么让鼠标经过覆盖颜色,第1张

CSS定义鼠标经过链接时的颜色，首先需要理解的是鼠标经过，这是个一个实践，hover，使用的方式是a:hover在加上你要更改的样式，在实际的设计中运用的比较多，具体看代码理解下：

<html>

<head>

<style>

body{

width:960px//限定网页的宽度

margin:0 auto

boreder:1px solid #f00 //加个边框利于观察

}

a{

font-size:13px

color:#0f0//绿色

}

a:hover{

color:#f00//红色

}

</style>

</head>

<body>

<a href=''点我会变颜色</a>

</body>

</html>

<div class="div">

<div class="img1 img">

    <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b8389b504fc2d5623c4a2718ec1190ef77c66c81.jpg">

</div>

<div class="img2 img">

    <img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/1e30e924b899a9011c88acc316950a7b0308f582.jpg">

</div>

</div>

<style>

.div{position:relative width:800px margin:auto}

.img{position:absolute z-index:0}

.img2{left:150px top:100px}

.img1:hover{z-index:1}

</style>

利用hover伪类就可以实现，自己再稍微修改下就可以了，解决请采纳

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:

1.被点击时的效果可以用div:active{

css

}

2.鼠标覆盖在上面的时候可以用div：hover{

css}

3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：

a.先给div添加一个选中的样式比如on{css}；

b.然后在js中$('div').click(function{

$('div').toggleClass('

','on')

})

这是jquery自带的一个方法，点击div切换2个class,