selector:hover与selector :hover的区别及CSS hover效果疑问解答

一、selector:hover 与 selector :hover 的核心区别 #

• selector:hover：作用于selector元素本身，当该元素被鼠标悬停时，触发样式规则。比如.box:hover就是鼠标移到.box元素上时，给.box自己添加样式。
• selector :hover：注意选择器与:hover之间的空格，这是后代选择器+伪类的组合，作用于selector的任意后代元素——当某个后代元素被鼠标悬停时，触发后续的样式规则（比如后续指定的子元素）。比如.nav :hover就是鼠标移到.nav下的任意子/孙元素上时，给该悬停元素或其内部元素加样式。

二、你的代码问题原因及解决办法 #

问题根源 #

你当前的CSS选择器是：

.nav  :hover a{
    color: black;
    background-color: white;
    line-height: 46px;
}

这个选择器的逻辑是：找到.nav下处于悬停状态的后代元素，然后选中该元素内部的<a>标签。所以只有你直接把鼠标移到某个按钮（比如Home对应的.buttons元素）上时，这个.buttons才会触发:hover，它内部的<a>才会应用样式；当你把鼠标移到.nav的空白区域时，没有任何后代元素处于悬停状态，自然不会有样式变化。

解决办法 #

如果你想要鼠标一移到.nav区域，所有的<a>标签都触发样式，需要把选择器改成：

.nav:hover a{
    color: black;
    background-color: white;
    line-height: 46px;
}

这个选择器的逻辑是：当.nav元素本身被鼠标悬停时，选中它所有后代的<a>标签，这样只要鼠标进入.nav区域，所有内部的<a>都会统一应用样式。

内容的提问来源于stack exchange，提问作者Đăng Nguyễn Khánh Minh