添加第二个悬停选择器答案

【问题标题】：Add 2nd hover selector添加第二个悬停选择器
【发布时间】：2015-07-08 09:00:00
【问题描述】：

您好，我创建了一个菜单。添加了一个活动类，因此当用户单击菜单图标时，它会突出显示页面链接到的“LI”。

我已经在您登录之前调用了悬停选择器。已添加 UL 的背景颜色。

我的问题是，我能否在登录时添加第二个悬停选择器并更改 UL 的背景，而无需更改用户登录之前设置的属性。

我可以在不添加另一个 css 类的情况下做到这一点吗？像 ::before 或 ::after 或 .active:hover 之类的东西。这样能行吗？

.menuColumn #nav ul li a.active {
  background: #029EF1;
  box-shadow: 0px 3px 0px #0175B2;
  color: #FFF;
}
.menuColumn #nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #E6E7E9;
}

JsFiddle Demo

片段演示：

 .example1 {
   width: 20%;
 }
 .example1 #nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   background: #E6E7E9;
 }
 .example1 #nav ul li {
   list-style: none;
   display: block;
   position: relative;
   text-align: left;
   border-bottom: 1px solid #CDCED0;
 }
 .example1 #nav ul li:last-child {
   border-bottom: none;
 }
 .example1 #nav ul li a {
   text-decoration: none;
   color: #7E7F81;
   line-height: 3em;
   display: block;
   padding-left: 15‌px;
   font-weight: bold;
 }
 .example1 #nav ul li a:hover {
   background: #7E7F81;
   color: #FFF;
   box-shadow: 0px 3px 0px #DBDCDD;
 }
 .example1 #nav ul li a.active {
   background: #029EF1;
   box-shadow: 0px 3px 0px #0175B2;
   color: #FFF;
 }
 .example1 #nav ul li a:not(.active) {
   background: #000;
   box-shadow: 0px 3px 0px #0175B2;
   color: #FFF;
 }

<body>
  <div class="example1">
    <div id="nav" style="padding-top: 4em;">
      <ul>
        <li><a href="test.html" target="_self" title="#">Example 1</a>
        </li>
        <li><a href="#" target="_self" title="#">Example 1</a>
        </li>
        <li><a href="#" target="_self" title="#">Example 1</a>
        </li>
      </ul>
    </div>
  </div>
</body>

【问题讨论】：

我尝试了 UL 的 :not 选择器，但这是在您登录之前为菜单选择 UL 的属性。
有什么解决办法吗？

标签： css hover html-lists

【解决方案1】：

当涉及到包含.active 类的ul 时，您将不得不使用一些javascript 来更改ULs 背景：

The FIDDLE

$(".active").parents("ul").css( "background" , "yellow" );

 .example1 {
     width: 20%;
 }
 .example1 #nav ul {
     list-style-type:none;
     margin:0;
     padding:0;
     background:#E6E7E9;
 }
 .example1 #nav ul li {
     list-style: none;
     display: block;
     position: relative;
     text-align: left;
     border-bottom:1px solid #CDCED0;
 }
 .example1 #nav ul li:last-child {
     border-bottom:none;
 }
 .example1 #nav ul li a {
     text-decoration:none;
     color:#7E7F81;
     line-height:3em;
     display:block;
     padding-left:15‌px;
     font-weight:bold;
 }
 .example1 #nav ul li a:hover {
     background:#7E7F81;
     color:#FFF;
     box-shadow:0px 3px 0px #DBDCDD;
 }
 .example1 #nav ul li a.active {
     background:#029EF1;
     box-shadow:0px 3px 0px #0175B2;
     color:#FFF;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="example1">
  <div id="nav" style="padding-top: 4em;">
      <p>UL with .active-link in it:</p>
      <ul>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
        <li><a href="test.html" target="_self" title="#" class="active">Active class</a></li>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
      </ul>
      <p>UL without .active-link in it:</p>
      <ul>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
        <li><a href="test.html" target="_self" title="#">Example 1</a></li>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
        <li><a href="#" target="_self" title="#">Example 1</a></li>
      </ul>
        </div>
    </div>
</body>

【讨论】：

当活动类被调用为“黄色或绿色”等其他颜色时，有没有办法改变#nav ul 的背景颜色。
希望这次我猜对了你真正想要的。请参阅我的更新答案。
没有 JavaScript 是可能的
对不起，答案是否定的。您不能使用纯 CSS 为某个子元素的父元素设置样式。
$(".active").parents("ul").css("background", "yellow"); - 有没有一种纯 JavaScript 方法可以使它工作。