<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,