��
css:hover 鼠标经过图像替换效果时尚
作者：岛主
ID：anguseleven
今天主要和大伙们来分享一个小小的关于技术内容的帖子，就是我们经常在很多电商平台上面看到的一些网页效果，比例鼠标经过，图片替换。
如图所示：
其实原理很简单 实现只需要准备两张图片;之后，只需要用CSS中的hover属性，既可以解决。
那么今天让我们来说说他的一个原理吧，首先得需要dreamweaver软件，如果之前没有接触过的，可以在我们的公众号里面，选择之前dreamweaver的公开课程，系统化学习。
***步新建HTML 文档：
之后注意事项：
CSS 样式里面的内容：一般写在 <head> </head>之间。
css样式的命名规范 一般用 点 .{…….} 其中 .代表类名，除此之外，也可以用#{……}, 其中#代表id,两种之间的区别是，类名class,可以重复使用，然而 id(#)一个页面只能出现一次。
类名命名规范：
首字母英文+数字组合，切忌使用html标签命名。如图所示：
第二步：所有正文部分的内容，需要写在body里面如图所示
正文里面的内容，可以是图片，文字，视频，脚步，等等。
第三步：接下来：我们来说说，鼠标经过的时候，图像链接替换的原理：
我们可以现在正文部分 body里面输入这么一段内容：
<div class=”box1″>
<a href=”#” target=”_blank”></a>
</div>
其中：box1 为 class类名 可以自定义；
a为链接标签；之前我们在dw公开课程中，也提起过，
href=设置链接，
target=’_blank’,代表设置新窗口弹出，
好了，正文部分完成之后，接下来，我们可以来设置 样式部分的内容，就是在head里面的内容
<style>
.box1 a{ width:300px; height:300px; background:#096; display:block;}
.box1 a:hover{ background:#6FF;}
</style>
其中： width:宽度；height：高度 background:背景颜色，display:block 显示固定
：hover代表鼠标经过的时候，替换背景颜色，效果如图所示；
好了，原理说完，接下来呢，我们可以做一个小小的实例，先看一下效果，后期可以跟着我们的视频当中来操作一下，
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 1812205765@qq.com 举报，一经查实，本站将立刻删除。
