css如何为nest元素指定样式?

时间:2018-06-19 09:50:17

标签: html css

li a:悬停不起作用。 当我将它悬停时,什么都没有改变。 颜色应该改变,但什么都不是

FF A4

}

li a:hover {
background-color: #555;
color: white;

5 个答案:

答案 0 :(得分:1)

试试这个:



li a:hover {
 background-color: #555;
 color: white;
}

<ul id=naw>
    <li><a href="#">home</a></li>
    <li><a href="#">stock</a></li>
    <li><a href="#">about me</a></li>
    <li><a href="#">braclets tutorial</a></li>
</ul>
&#13;
&#13;
&#13;

注意:如果您有其他css规则,要覆盖它,请使用!important,如下所示:

li a:hover {
 background-color: #555!important;
 color: white!important;
}

答案 1 :(得分:0)

试试这段代码。

<ul id="naw">
    <li><a href="#">home</a></li>
    <li><a href="#">stock</a></li>
    <li><a href="#">about me</a></li>
    <li><a href="#">braclets tutorial</a></li>
</ul>

和CSS,

#naw li a:hover {
background-color: #555;
color: white;
}

答案 2 :(得分:0)

没有a代码(不要忘记将""添加到id的{​​{1}})

ul
li:hover {
background-color: #555;
color: white;
}

使用<nav> <ul id="naw"> <li>home</li> <li>stock</li> <li>about me</li> <li>braclets tutorial</li> </ul>代码:

a
    li a:hover {
    background-color: #555;
    color: white;
    }

答案 3 :(得分:0)

试试这个

HTML:

<ul id="naw">
<li><a href="#">home</a></li>
<li><a href="#">stock</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">braclets tutorial</a></li>
</ul>

CSS:

#naw li a:hover {
  background-color: red;
   color: blue;
}

http://jsfiddle.net/xz7fueo1/1/

答案 4 :(得分:0)

试试这个工作

&#13;
&#13;
ul li a:hover{
color: pink;
}
&#13;
<ul id=naw>
    <li><a href="#">home</a></li>
    <li><a href="#">stock</a></li>
    <li><a href="#">about me</a></li>
    <li><a href="#">braclets tutorial</a></li>
</ul>
&#13;
&#13;
&#13;