javascript - 摆脱 <li> 上的悬停效果

Question

我正在尝试在我正在设计的网页上添加一些指向应用商店的链接。合并它们的最佳方法是将它们添加到现有的 <ul> 中。对象，signin_box并使用另一个 <ul> 覆盖 CSS称为 app_downloads .但是，当您将鼠标悬停在导致 <li> 颜色的元素上时，ul 会产生一些影响。改变。如果我可以将颜色更改为#FFF(其他所有内容的背景颜色，使其不可见)或摆脱悬停效果，那将是完美的。我一直在玩弄 CSS，但似乎没有任何效果。下面是处理这两个<ul>的CSS类。我只想摆脱从 signin_box 继承的悬停样式在 app-downloads .

.app-downloads li {
    position: relative;
    top: -8px;
}

.signin_box .app-downloads li a {
    background:  #FFF;
    border:  none;
    text-align: center;
}

.signin_box .app-downloads ul li a:hover, .signin_box .app-downloads ul li a.active {
    background-color: #FFF;
    background: #FFF;
    color: #FFF;
}

这是 HTML:

<div class="signin_box">
   <ul>
      <li>
         <g:link controller="public" action="taketour" class="taketour"><span class="tour"></span>Take a Tour</g:link>
      </li>
      <li><a href="link to a PDF"><span class="brochur"></span>View Document</a></li>
      <li class="register">
         <g:link controller="public" action="signup" class="active">Sign Up</g:link>
      </li>
      <ul class="app-downloads">
         <li>
            <a href="link to google play app"><img alt="Google Play" height = "50" width="158" src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" /><span class="googleApp"></</span></a>
         </li>
         <li>
            <a href="iOS app link">
               <g:img  dir="images" file="Download_App.png" height = "50" width="158" alt="Download on the App Store" />
               <span class="iOS app"></span>
            </a>
         </li>
      </ul>
   </ul>
</div>

Answer 1

你的 css 不工作因为 .app-downloads 是 ul，所以这个选择器不工作:。 signin_box .app-downloads ul li...

像这样改变它，你的 css 就可以工作了:

.signin_box .app-downloads li a:hover, 
.signin_box .app-downloads li a.active {
     /* styles go here */
}

奖励: 一种更好的方法是将 .signin_box 样式更改为更具体，以免影响 .app-downloads 列表。有几种方法可以解决这个问题，并且在不了解您的具体元素的情况下，很难说这些方法是否(或哪些)可行:

/* Modify ORIGINAL styles to be like so */
.signin_box > ul > li > a:hover {
    /* these will only affect immediate descendants, not nested lists */
}

或

.signin_box:not(.app-downloads) ul li > a:hover {
    /* these will specifically exclude app downloads lists, BUT may still inherit, so may not be the best option */
}