| 前端交互之hover用法 | 您所在的位置：网站首页 › 代码hover是什么意思 › 前端交互之hover用法 |
前端交互之hover用法
|
前端交互之hover用法
不给源码的博客都是耍流氓，所以，第一步，先把源码给各位 hover 用法之图片交互 .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; }以上就是完整源码。现在对上述代码进行逐一解释 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或加微请备注自己是要源码的。如有批评，本人虚心接受。 |
【本文地址】
公司简介
联系我们