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

百度经验   发布时间:2018-09-14 10:36:43   作者:患者无薪   我要评论

dw怎么制作鼠标经过图标改变颜色?Dreamweaver中可以制作鼠标经过图标图标改变颜色的效果,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下

Dreamweaver设计网页的时候,会插入各种图标,想要制作一个鼠标经过图标时图标改变颜色的效果,该怎么制作呢?下面我们就来看看详细的教程。

软件名称:
Adobe Dreamweaver CC 2018直装破解版 64位 免激活注册(附安装教程)
软件大小:
600MB
更新时间:
2017-10-30

1、准备好一对图标,大小相同,颜色不同。

2、然后在body文档中,插入第一场图片,代码是<li><img src="img/ad_01.png" alt=""></li>

3、插入第一张图片后,在下方插入和他颜色不同的另一张图片,采用同级的关系

4、对他们的父集ul添加定位position:relative;并对第一张图片设置绝对定位,ul li:nth-child(1){position:absolute;left:0;top:0;}位置方面可以按照自己需要调整

5、对第二张图片处理方法相同,也是绝对定位,位置和第一张图片相同,这样定位后,后面的第二张图片会覆盖在第一张图片的上方

ul li:nth-child(2){position:absolute;left:0px;top:0;}

6、在开始前将第二张图片设置为隐藏display:none;当鼠标经过时显示第二张图片

7、设置完对第二张图片的隐藏后,设置当鼠标经过ul时,第二张图片显示ul:hover li:nth-child(2){display:block;}

以上就是dw制作鼠标经过图标图标改变颜色的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

DW怎么制作鼠标经过图片渐渐变暗效果?

Dreamweaver怎么制作鼠标点击隐藏事件?

dreamweaver怎么制作鼠标经过图片变换的效果?

相关文章

  • Dreamweaver怎么制作虚线表格?

    Dreamweaver怎么制作虚线表格?Dreamweaver制作的表格是实线边框的,想要制作虚线边框,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-08-23
  • Dreamweaver怎么添加windows字体?

    Dreamweaver怎么添加windows字体?Dreamweaver设计网页的时候,想要添加windows系统中的字体,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-08-09
  • Dreamweaver中CSS怎么制作径向圆形渐变?

    Dreamweaver中CSS怎么制作径向圆形渐变?Dreamweaver中可以利用DIV+CSS制作圆形渐变效果,今天我们就来介绍五种简单的制作方法,需要的朋友可以参考下
    2018-08-01
  • Dreamweaver图片的亮度和对比度怎么设置?

    Dreamweaver图片的亮度和对比度怎么设置?dw cs6中插入的图片想要简单的调节亮度和对比度,该怎么调节呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-31
  • Dreamweaver怎么设置div的背景颜色?

    Dreamweaver怎么设置div的背景颜色?dw cs6中想要设置div标签的背景颜色,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-25
  • Dreamweaver中div标签怎么设置左右并排?

    Dreamweaver中div标签怎么设置左右并排?Dreamweaver中div标签默认是上下并排的,想要设置成左右并排,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-17
  • Dreamweaver2018怎么插入项目列表?

    Dreamweaver2018项目列表怎么使用?Dreamweaver中的文本想要添加项目列表,看上去条理分明,该怎么添加项目列表呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06
  • Dreamweaver2018怎么快速插入按钮?

    Dreamweaver2018怎么快速插入按钮?dw2018需要按钮,该怎么快速插入按钮,节省自己制作的时间呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06
  • Dreamweaver2018怎么快速插入文本框?

    Dreamweaver2018怎么快速插入文本框?dw2018制作网页的时候,想要插入文本框,该怎么插入文本框呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2018-07-06
  • Dreamweaver主次浏览器怎么设置?

    Dreamweaver主次浏览器怎么设置?Dreamweaver设计的网页需要预览,这时候就可以设置浏览器种类,该怎么设置主次浏览器呢?下面我们就来看看详细的教程,需要的朋友可以参考
    2018-06-28

最新评论