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