上周，我们学习了运用:hover复合选择器，制作鼠标悬停在导航栏上的样式变化效果。在课后作业中，我要求同学们把导航栏放入店铺首页，运用:hover选择器制作鼠标悬停在导航栏的效果。

先来回顾一下知识点。

:hover选择器是CSS样式中的复合选择符，冒号前面的内容代表鼠标悬停的位置。它可以作用于网页中的所有元素，如超链接<a>、表格<table>、单元格<td>等网页标签。在Dreamweaver操作中，我们可以通过新建CSS规则，选择复合选择符，输入:hover选择器名称设置样式。在输入名称时，格式为“网页元素名称:hover”，例如：a:hover代表鼠标悬停在超链接上的效果。

当然网页元素名称也可以是其他选择符：

例如类选择符，.apple:hover代表鼠标悬停在类选择符上的效果，当鼠标经过“class=apple”的网页内容时会发生的样式变化；ID选择符，#orange:hover代表鼠标悬停在ID是orange的网页内容时发生的样式变化。

与此同时，冒号前的网页元素名称也可以进行重组，例如要设置ID为#tb表格中的超链接，在鼠标悬停时的样式变化，我们可以把网页名称设置为#tb a:hover。多个选择符叠加时，使用空格分隔即可。

那么问题来了，许多同学掌握了制作单个导航栏的方法，一旦将导航栏放入整体页面却出现了很多问题。比如小佳同学就出现了“当鼠标经过导航栏时，是一整排全亮，甚至连店招所在的表格也跟着发生样式变化”的问题。这是为什么呢？

好，接下来，我们来看看小佳同学的作业：

「视频解析版本」

视频加载中...

「文字解析版本」

显然小佳的作业中，鼠标移入导航栏，出现了一整行的变化，而非单个单元格的变化，并且顶部店招区域也出现了样式变化。

当我们检查小佳的代码时，我们发现:hover选择器前的网页内容是td，这就意味着鼠标经过网页中所有的单元格都会发生以下所设置的样式变化。

这里的td:hover是鼠标悬停在单元格（列）的效果。而我们之前做的是一行N列的导航栏，不存在其他多余单元格，因此在这个情况下我们可以用td:hover来实现鼠标经过单元格的效果。

但是，你看下面的代码，有多少个td呢？我们这里多行多列，并且你在第二行的单元格中嵌套了表格。因此，如果用td:hover，页面中所有的td都会有鼠标经过的效果，因此你会发现整个页面都会出现鼠标经过变红色的效果。所以，接下来，我们要思考如何把td替换一下。

:hover前的td该如何被替换呢？

方法1：

新建CSS样式，类型为类选择器（命名为.daohang，为导航栏鼠标未经过时的样式）设置好之后，选中导航栏单元格，并右键选择应用。设置后代码如下：

应用后，你可以直接到代码区域把原来的td替换为.daohang。也可以新建CSS规则，类型为复合样式，名称为.daohang:hover。

方法2：

将表格的名称（ID）设置为tb1，那么是tb1这个表格中的单元格样式变化，因此我们可以将名称设置为 “#tb1 td:hover”，这样同样可以实现之前的效果。

好了，以上就是:hover选择器在网页中的应用，你学会了么？

如果你也想试一试，可以回复关键词“网页”获取图片素材和Dreamweaver CS6软件。

Ps:以上内容与网课同步，部分知识点还未涉及，因此部分代码冗余，请专业人士多多谅解哦~

-END-

作者介绍：卓小尔，思维导图学习实践者，95后职业教育教书匠

成长 | 教育 | 旅行