鼠标悬停在导航栏上时更改颜色

Question

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

Answer 1

所以，为了使这个“徘徊”＆＃39;效果，你应该使用css的:hover，允许你在鼠标悬停在它上面时将样式设置为元素/类/ id。既然你在谈论背景颜色，你甚至可以很好地转换它：

read more about :hover...

＆＃13;

＆＃13;

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

div:hover{
  background:lightblue;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

注意

这是样式元素的通用模式/方式。您可以编辑要为其他元素悬停效果设置样式的CSS;

elementTag:hover{}

<强>类;

.className:hover{}

<强> ID＆＃39; S;

#MyID{}

或＆＃39;其他选择器＆＃39;;

.myParentClass:hover .myChild{}

例如，如果子元素的父元素悬停，则上面的选择器将更改子元素。

---

还有:active和:focus个选择器，可在选择“活跃”时定义规则。或者＆＃39;聚焦＆＃39;，但这更符合文本输入。

作为旁注;这些 css2.1＆＃39> 选择器可用于a LOT of browsers - 所以，即使IE 7也支持它！所以可以在所有网站上安全使用：）

Documentation