javascript - 悬停时更改 <li> parent 的颜色

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;}

这是我的代码，但是当我在 anchor 标记 (<a href="#" style="color:red;">link 3.2.1</a>) 中打印文本时，CSS 不起作用，我尝试为链接元素实现的颜色更改也不起作用。我怎样才能让它以同样的方式工作，即使文本在 anchor 标签内？我想按如下方式更改 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

从 anchor 中删除内联样式并尝试使用此 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;}

updated jsFiddle File