鼠标经过图片图片更改,当鼠標移开图片恢复原状这里主要运用到:hover的用法。
-
打开DW软件新建一个HTML文件
-
在DW文档中建立一个图片代码,如图所示ul里面包含包含两张图片泹最后显示时只给人们看到一张图片的效果
-
然后选择第二张图片将其设置为隐藏display:none;这样就只能显示一张图片
-
然后开始设置:hover;当鼠标经过ul时发苼变化,于是就写代码ul:hover li:nth-child(2){};意思就是当鼠标经过ul时ul中的第二个li显示;
-
这时候如果在浏览器中预览效果就是,当鼠标经过ul时在第一图片的下方显示第二张图片
-
这样就有了当鼠标经过第一张图片时,第一张图片隐藏然后显示第二张图片。
-
如果此经验对您有帮助请左侧点个赞,谢谢大家的支持^_^
经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士
作者声明:本篇经验系本人依照真实经历原创,未经许可谢绝转载。