dw怎么制作鼠标经过图标改变颜色-

制作网页时，我们经常需要添加图标来提升用户体验。特别是使用Dreamweaver设计网页时，如果你想让鼠标悬停在图标上时改变其颜色，这是一个很好的交互设计。下面是一个详细的教程，教你如何在Dreamweaver中制作这样的效果。

确保你安装的是Adobe Dreamweaver CC 2018的64位官方版本。这款软件大小为600MB，于2017年10月30日更新。

接下来，按照以下步骤操作：

1. 准备一对大小相同但颜色不同的图标。

4. 对包含这两张图标的父集ul添加相对定位，即position:relative。接着，对第一张图标设置绝对定位，例如ul li:nth-child(1){position:absolute;left:0;top:0;}，可以根据需要调整位置。

5. 第二张图标的处理方法相同，也是绝对定位，位置与第一张图标相同。这样定位后，第二张图标会覆盖在第一张图标的上方。

6. 初始时，将第二张图标设置为隐藏，即display:none。

7. 当鼠标悬停在ul上时，显示第二张图标。这一步骤的CSS代码为：ul:hover li:nth-child(2){display:block;}。

至此，你已经完成了在Dreamweaver中制作鼠标悬停时图标颜色改变的效果。当鼠标悬停在图标上时，图标颜色会发生变化，为用户带来更好的体验。

请继续关注我们的狼蚁SEO，我们会不断分享更多实用的教程和技巧。

我们还推荐你Dreamweaver的其他功能，如响应式设计、网页优化等，这将有助于你更好地设计和优化网页。

以上即为在Dreamweaver中制作鼠标悬停图标变色效果的详细教程，希望对你有所帮助。如果你有任何疑问或需要进一步的指导，请随时提问。