Question

JS Fiddle

所以是的，<b>每当徘徊时都会改变font-color，但它不会。问题是，我能够通过

使其工作

删除样式表中的＃sidebar（即#sidebar nav#menu）
或删除样式表中的#menu中的nav#menu

但为什么会这样呢？

另外，奖励问题，边框动画如何仅在鼠标悬停时激活，而不是在mouseout上激活？

谢谢！

Answer 1

目前，它正在改变，但您的初始颜色会覆盖当前的颜色。

你可以做到

#yourelement:hover b{ color: red !important;}

Answer 2

http://jsfiddle.net/f33cR/ 检查一下

注意：当您添加类似“#paren #child #element”的类时，您应用一个简单的css，如#element，不会覆盖该类。如果要覆盖，则有两个选项。

选项1. #parent #child #element:hover

或

选项2. #element:hover { color:red!important;}

Answer 3

你必须在你的CSS中使用！important，因为你已经编写了你的CSS，它会覆盖默认的预定义颜色。

快速＆amp;脏（但有效）的替代方法是简单地将color: #555从<b>移到li

http://jsfiddle.net/f33cR/8/

Answer 4

像这样编写你的CSS

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

<强> Demo

---------------

请选择第二个选项

替换此

#sidebar nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

进入此

nav#menu li b { font-size:1.7em;  text-align:left; color:#555; }

<强> Demo 2

Answer 5

我会像这样写

#sidebar nav#menu #home-btn:hover b { color:#ef672f; }
#sidebar nav#menu #about-btn:hover b { color:#1ba59b; }
#sidebar nav#menu #portfolio-btn:hover b { color:#4d7ba2; }
#sidebar nav#menu #resume-btn:hover b { color:#bc6538;}
#sidebar nav#menu #contact-btn:hover b { color:#79a22e; }

关于奖金，我不知道，但你可以用jquery更好地触发这些行动。

：悬停不会改变孩子的字体颜色

5 个答案:

---------------