dreamweaver复合内容 怎样实现当鼠标经过标签时内容更换,但内容的位置不变

鼠标经过图片图片更改,当鼠標移开图片恢复原状这里主要运用到:hover的用法。

  1. 打开DW软件新建一个HTML文件

  2. 在DW文档中建立一个图片代码,如图所示ul里面包含包含两张图片泹最后显示时只给人们看到一张图片的效果

  3. 然后选择第二张图片将其设置为隐藏display:none;这样就只能显示一张图片

  4. 然后开始设置:hover;当鼠标经过ul时发苼变化,于是就写代码ul:hover li:nth-child(2){};意思就是当鼠标经过ul时ul中的第二个li显示;

  5. 这时候如果在浏览器中预览效果就是,当鼠标经过ul时在第一图片的下方显示第二张图片

  6. 这样就有了当鼠标经过第一张图片时,第一张图片隐藏然后显示第二张图片。

  • 如果此经验对您有帮助请左侧点个赞,谢谢大家的支持^_^

经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士

作者声明:本篇经验系本人依照真实经历原创,未经许可谢绝转载。

我要回帖

更多关于 dreamweaver 的文章

 

随机推荐