摆脱 <li> 上的悬停效果答案

【问题标题】：Get Rid of Hover Effects on a <li>摆脱 <li> 上的悬停效果
【发布时间】：2015-12-24 18:22:24
【问题描述】：

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

.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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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 */
}

【讨论】：

【解决方案2】：

您的选择器错误。请更改：

.signin_box .app-downloads ul li

与：

.signin_box ul.app-downloads li

因为<ul> 是具有.app-downloads 类的元素，而该类内部不包含<ul>。您的完整 CSS 将是：

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

【讨论】：