我正在尝试在我正在设计的网页上向应用程序商店添加一些链接。合并它们的最好方法是将它们添加到现有的<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-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 */
}