前端交互之hover用法

最新推荐文章于 2025-03-12 15:39:02 发布

浑水摸王八

最新推荐文章于 2025-03-12 15:39:02 发布

阅读量7.7k

点赞数 10

分类专栏：前端文章标签：前端交互 hover

本文链接：https://blog.csdn.net/weixin_42547154/article/details/83783579

版权

前端专栏收录该内容

1 篇文章

订阅专栏

前端交互之hover用法

不给源码的博客都是耍流氓，所以，第一步，先把源码给各位

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>hover 用法之图片交互</title> 
<style> 
.test{
   position:absolute;
   left: 100px;
   top: 100px;
   width: 200px;
   height: 200px;
   background: url("logo.png") no-repeat center 0 transparent;   
}
.test:hover{
   background: url("Coding.PNG") no-repeat center 0 transparent;
}
</style> 
</head> 
<body> 
<div class="test"></div>
</body> 
</html>

以上就是完整源码。现在对上述代码进行逐一解释

background: url("upload2.png")    //在class为test的框内选定背景图像为upload2.png,您可以选择别的图片，但注意图片的路径不要写错

 no-repeat center 0 transparent //在class为test的框内该图片只出现一次，如果去掉这行代码，图片会重复出现，填满整个框，您可以尝试一下

.test:hover{
   background: url("Coding.PNG") no-repeat center 0 transparent; //鼠标移到class为test的框内之后，它的背景图片就变成另一张了
}

.test{
……………………
}
在鼠标没有移动上去时
class为test的属性

.test:hover{
……………………
}
鼠标移动到class为test的范围之后，test的属性。

本人之前买了一些前端的书，但都没有看到过作者写过这种交互方式，可以说作者很不负责。因此在工作中也走了不少弯路，网上下的源码太长，太烦，看不懂，我上面二三十行代码就能解决的问题，某些人故弄玄虚，搞了几百上千行代码，实在误人子弟。

以下就是效果图：
鼠标没放到图片上的效果
在这里插入图片描述

鼠标放到图片上的效果：
在这里插入图片描述

本人qq:790940146,微信A790940146,如果要源码欢迎骚扰，加Q或加微请备注自己是要源码的。如有批评，本人虚心接受。