Question

我正在摆弄Wordpress导航。我有一个导航，在悬停状态下，每个li项目的背景变为橙色，文本意味着从黑色变为白色。

虽然有3种颜色正在出现。如果没有悬停，则<a>为黑色，当<li>项目悬停在<a>标记上时，文字为灰色，当您悬停在<a>标记的中间位置时，文字的颜色是白色的。

锚文本应该有两种颜色：默认为黑色，悬停时为白色。我需要停止灰色，这样当橙色被激活时，白色文本也是如此。

这个Wordpress网站的一些代码可能是相关的。我猜测下面的这些，但无法看到我将编辑此特定问题的位置。如果有人可以提供指针，网站就在这里，我甚至不确定我应该选择什么：

tinyurl.com/m562wgd

/*     2.2.1 Top Drop-down menu */
    .dropdown ul,
    .dropdown ul li,
    .dropdown ul ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

和

.dropdown ul li {
  float: left;
  min-height: 1px;
  line-height: 1.3em;
  vertical-align: middle;
}
.dropdown ul li.hover,
.dropdown ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}

Answer 1

灰色来自改变不透明度。当您将鼠标悬停在锚标记上时，您只会看到白色，因为这是您拥有悬停集的唯一位置

添加

.dropdown ul li:hover a {
  color: white;
}

应该这样做

Answer 2

规则中没有灰色，只是不透明度变化：

.dropdown ul li.hover, .dropdown ul li:hover, .dropdown ul li.on {
    background-color: orange;
    opacity: 0.4;
}

这使得黑色看起来是灰色的。当您将鼠标悬停在列表项上时，还需要添加以下规则以使链接变为白色：

.dropdown ul li:hover a {
    color: white;
}

李悬停但改变了锚标记的颜色

2 个答案: