Question

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

app-downloads

这是HTML：

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

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 */
}

OR

.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 */
}

Answer 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;
}

摆脱<li>上的悬停效果

2 个答案: