Dreamweaver中:hover鼠标经过事件的用法

 时间:2024-10-12 06:09:28

1、制作一个百度的导航页,如下图,分别对ul和li、a进行修饰;最后效果如下图所示

Dreamweaver中:hover鼠标经过事件的用法
Dreamweaver中:hover鼠标经过事件的用法

2、为了有更好的体验,现在将a标签添加以下属性:背景颜色设置为灰色 background-color:gray;字体设置为白色color:white;添加一个内填充,使背景颜色向外扩大一圈padding:10px;

Dreamweaver中:hover鼠标经过事件的用法
Dreamweaver中:hover鼠标经过事件的用法

3、这里要分析下,是鼠标韦蛾拆篮经过ul大框时发生文字改变颜色,还是经过li小框时发生变化,如果鼠标经过ul发生变化,则会发生的情况是:鼠标吲溘活口经过ul大框时,里面所有的小子集都会发生变化,这不是我们想要的结果,我们想要的是鼠标经过哪个标题,则哪个标题发生变化;所以我们确定,鼠标经过li时发生对应的变化li:hover

Dreamweaver中:hover鼠标经过事件的用法

4、然后就是鼠标经过li时,谁发生的变化,文字包含在a里面,所以这里就设置为鼠标经过li时,里面的a发生变化;在:hover后面空格然后加ali:hover a{}在a后面的括号内,就是发生怎样的变化,填写对应的属性

Dreamweaver中:hover鼠标经过事件的用法

5、比如我们如果经过li时,背景颜色变为青色,如下图所示,在浏览器中预览,当鼠标经过标题时,文字的背景颜色就会变为青色,当鼠标离开时,又会恢复到原来的颜色

Dreamweaver中:hover鼠标经过事件的用法
Dreamweaver中:hover鼠标经过事件的用法

6、然后设置文字颜色,如将文字变化后的颜色改为红色 color:red;当鼠标经过标题栏时,背景变为青色,文字变为红色,当鼠标离开标题栏时恢复原状。

Dreamweaver中:hover鼠标经过事件的用法
Dreamweaver中:hover鼠标经过事件的用法
  • dw超链接怎么设置
  • dw字体大小设置
  • DW如何把文字居中
  • dw图片怎么居中
  • 在Dreamweaver HTML文档中如何新建CSS样式?
  • 热门搜索
    清明节手抄报内容大全 传统文化手抄报内容 白衣天使手抄报 劳动手抄报简单漂亮 英语手抄报图片简单又漂亮 庆六一手抄报内容 关于安全教育的手抄报 六一儿童节手抄报内容 中华传统文化手抄报 爱眼日手抄报内容