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

html-css046

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,