css - 当鼠标悬停在导航上时更改颜色

Question

当鼠标悬停在 menu-item 上时，如何更改 menu-bar 的颜色？

Answer 1

因此，为了实现这种“悬停”效果，您应该使用 css 的 :hover，允许您在鼠标悬停在元素/类/id 上时设置样式.既然你在谈论背景颜色，你甚至可以让它很好地过渡:

read more about :hover...

div{
  display:inline-block;
  background:gray;
  transition: all 0.8s; /*allows animation*/
  padding:10px;
  margin:5px;
  }

div:hover{
  background:lightblue;
  }

<div>hi. You could hover me</div><div>...or me</div>

---

注意

这是样式元素的通用模式/方式。您可以编辑您的 css 以针对其他元素的悬停效果设置样式；

elementTag:hover{}

类；

.className:hover{}

id;

#MyID{}

或'其他选择器';

.myParentClass:hover .myChild{}

例如，上面的选择器将在其父元素悬停时更改子元素。

---

还有 :active 和 :focus 选择器，它们定义了选择是 'active' 或 'focused' 时的规则，但这更符合文本输入.

作为旁注；这些 css2.1 的 选择器可用于 a LOT of browsers - 这么多，甚至 IE 7 都支持它!所以可以在所有网站上安全使用:)

Documentation