我正在尝试在我正在设计的网页上向应用程序商店添加一些链接。合并它们的最好方法是将它们添加到现有的<ul>对象signin_box中,并使用另一个称为<ul>app_downloads覆盖CSS。但是,当您将ul悬停在引起<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>

最佳答案

您的CSS无法正常工作,因为.app-downloadsul,因此此选择器不起作用:.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 */
}

10-05 20:58
查看更多