改变颜色 <li> 父母徘徊

Question

HTML代码

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
  <ul>
    <li>link 3.1</li>
     <li>link 3.2
       <ul>
          <li><a href="#" style="color:red;">link 3.2.1</a></li>
           <li>link 3.2</li>
            </ul>
          </li>
       </ul>
      </li>
   </ul>

的CSS

 li:hover{color: blue;font-weight:bold;}

 li:hover li {color: red;font-weight:normal;}

 li:hover li:hover{color: blue;font-weight:bold;}

这是我的代码，但是当我在锚标记（ <a href="#" style="color:red;">link 3.2.1</a> ）中打印文本时，CSS不起作用并且颜色更改我尝试为link元素实现的功能无效。 即使文本在锚标记内，我如何也能以相同的方式工作？ 我希望如下更改HTML代码

<ul>
<li><a href="#" style="color:red;">LINK 1</a></li>
<li><a href="#" style="color:red;">LINK 2</a></li>
<li><a href="#" style="color:red;">LINK 3</a>
  <ul>
    <li><a href="#" style="color:red;">link 3.1</a></li>
     <li><a href="#" style="color:red;">link 3.2</a>
       <ul>
          <li><a href="#" style="color:red;">link 3.2.1</a></li>
           <li><a href="#" style="color:red;">link 3.2</a></li>
            </ul>
          </li>
       </ul>
      </li>
   </ul>

Answer 1

从锚中删除内联样式，然后尝试使用此CSS

li a{ color:red;} 
li:hover, li:hover a{color: blue;font-weight:bold;}

li:hover ul a{color: red;font-weight:bold;}
li:hover ul li:hover > a{color: blue;font-weight:bold;}

更新了jsFiddle文件

Answer 2

首先，您必须定义标签的颜色。

为第一个ul添加课程

<ul class="list">
...
</ul>

例如

.list li a{
color:#000;
}

.list li a:hover
{
color:blue;
}

.list li:hover > ul li a
{
color:red;
}
.list li ul li a:hover
{
color:blue;
}

看看这个http://jsfiddle.net/3wc7181c/

Answer 3

我想这就是你想要的吗？

li:hover{color: blue;font-weight:bold;}
li:hover li {color: red;font-weight:normal;}
li:hover li:hover li, 
li:hover li:hover li a{color: blue !important;font-weight:bold;}

演示版

Answer 4

只需添加以下CSS并删除内联CSS

a{ color:red;}

li:hover{color: blue;font-weight:bold;}

 li:hover li {color: red;font-weight:normal;}

 li:hover li:hover{color: blue;font-weight:bold;}

li:hover li:hover a:hover{color: blue;font-weight:bold;}

更新了演示http://jsfiddle.net/wcs1mhg6/2/

Answer 5

试试这个，你会得到你想要的

li a:hover{color: blue !important;font-weight:bold;}
li a:hover li {color: red;font-weight:normal;}
li a:hover li:hover, 
li li li a:hover{color: blue !important;font-weight:bold;}