hover:当鼠标滑上时。
(其实就是给你鼠标要滑上的区域一个超链接,然后给它一个伪类来实现你想要实现的效果。)
(这里以我自己的项目效果为例)
no-repeat:调像素,后边紧跟的是调动的x轴y轴的值。
1.最基本的 当鼠标滑上文字文字变色。
a:hover{
color:red;
}
像这种给文字一个超链接,然后再写一个伪类实现你想要实现的效果。
1.当鼠标滑上时出现红色边框。
.body_body .body_body_img:hover{
outline: 3px solid red;
}
2.当鼠标划上出现阴影边框。
.body_body .body_body_img:hover{
box-shadow: #808080 5px 5px 5px 5px; /*当鼠标划上出现阴影边框*/
}
3.当鼠标划上出现红色下边框。
(1).body_body_img{
color: gray;
width: 240px;
height: 340px;
background-color: white;
display: inline-block;
margin-left: 10px;
margin-top: 10px;
}
.body_body_img:hover{
margin-bottom: -7px;
border-bottom: 3px solid #FF2C72;
}
(2).body_body_img{
color: gray;
width: 240px;
height: 340px;
background-color: white;
display: inline-block;
margin-left: 10px;
margin-top: 10px;
border-bottom: 3px solid gainsboro;
}
.body_body_img:hover{
border-bottom: 3px solid #FF2C72;
}
4.当鼠标划上空心的心出现实心的心。
原始给出的材料图是这样的:
可以用下边这段代码调出空心的心:
width: 15px;
height: 14px;
background:url(../img/icon/ico.png) no-repeat 3px -70px ;
结合hover要实现功能代码如下:
.list_love{
width: 15px;
height: 14px;
background:url(../img/icon/ico.png) no-repeat 3px -70px ;/*空心的心*/
margin-left: 30px;
margin-top: -35px;
}
.list_love:hover{
background:url(../img/icon/ico.png) no-repeat -12px -70px ;/*实心的心*/
}