html中hover和no-repeat

最新推荐文章于 2025-06-01 09:59:50 发布

小小舍

最新推荐文章于 2025-06-01 09:59:50 发布

阅读量5.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/qq_43560721/article/details/84376475

html+css 专栏收录该内容

5 篇文章

订阅专栏

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