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

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

Dreamweaver中:hover鼠标经过事件的用法,:hover的使用方法也简单，也很好理解，

:hover里面包含两个动作，一个鼠标经过时发生的事件，鼠标移开后恢复原状，下面我们还是以百度导航为例

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

为了有更好的体验，现在将a标签添加以下属性：

背景颜色设置为灰色 background-color:gray;

字体设置为白色color:white;

添加一个内填充,使背景颜色向外扩大一圈padding:10px;

这里要分析下，是鼠标经过ul大框时发生文字改变颜色，还是经过li小框时发生变化，如果鼠标经过ul发生变化，则会发生的情况是：鼠标经过ul大框时，里面所有的小子集都会发生变化，这不是我们想要的结果，我们想要的是鼠标经过哪个标题，则哪个标题发生变化；

所以我们确定，鼠标经过li时发生对应的变化li:hover

然后就是鼠标经过li时，谁发生的变化，文字包含在a里面，所以这里就设置为鼠标经过li时，里面的a发生变化；

在:hover后面空格然后加a

li:hover a{}

在a后面的括号内，就是发生怎样的变化，填写对应的属性

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

然后设置文字颜色，如将文字变化后的颜色改为红色 color:red;

当鼠标经过标题栏时，背景变为青色，文字变为红色，当鼠标离开标题栏时恢复原状。