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

<强> updated jsFiddle File

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

Demo

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

在悬停时更改<li>父母的颜色</li>

5 个答案: