前端交互之hover用法
前端交互之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或加微请备注自己是要源码的。如有批评,本人虚心接受。