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

时间:2013-06-06 18:28:24

标签: css hover

我正在摆弄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;
}

2 个答案:

答案 0 :(得分:3)

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

添加

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

应该这样做

答案 1 :(得分:1)

规则中没有灰色,只是不透明度变化:

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