html中hover和no-repeat

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 ;/*实心的心*/
}