如何为每个链接设置不同的悬停颜色

Question

我有以下 DIV：

<div id="second-menu-navi" class="navi">
            <a href="" id="tab-1">Why Choose Us</a>
            <a href="" id="tab-2">Physicians</a>
            <a href="" id="tab-3">Medical Specialties</a>
            <a href="" id="tab-4">Locations</a>
            <a href="" id="tab-5">Urgent Care</a>
            <a href="" id="tab-6">Radiology</a>
            <a href="" id="tab-7">Lab</a>
        </div>
</div>

当鼠标悬停在上面时，下面的 CSS 会改变背景颜色：

#second-menu-navi a:hover, #second-menu-navi a.active {
    background-color:#155E9B;
}

我试图通过添加以下 CSS 来更改每个选项卡以具有不同的悬停颜色：

#second-menu-navi #tab-1 a.active, #second-menu-navi #tab-1 a.hover {
    background-color: #155E9B;
}
#tab-2 a.active, #tab-2 a.hover {
    background-color: #159B77;
}
#tab-3 a.active, #tab-3 a.hover {
    background-color: #1E9B15;
}
#tab-4 a.active, #tab-4 a.hover {
    background-color: #969B15;
}
#tab-5 a.active, #tab-5 a.hover {
    background-color: #9B2B15;
}
#tab-6 a.active, #tab-6 a.hover {
    background-color: #9B1574;
}
#tab-7 a.active, #tab-7 a.hover {
    background-color: #70159B;
}

但是当悬停时，没有一个链接改变背景颜色。请帮我解决问题。

Answer 1

原则上，对于使用伪选择器，将句点更改为冒号：

a.hover

变成：

a:hover

在Mozilla Developer Network 上查看有关:hover 的更多信息。

对于您的问题，您需要将:hover 直接应用于#tab-1，而不是a。所以：

#tab-1 a.hover

变成：

#tab-1:hover 或 a#tab-1:hover。

Answer 2

您正在选择#tab-2 的<a> 子级，并且使用了错误的伪选择器。

用a#tab-2:hover代替#tab-2 a.hover。

使用a#tab-2:active，而不是#tab-2 a.active。

Answer 3

这样您可以在鼠标悬停时更改每个链接的颜色。这是工作 Demo.

a#tab-1:hover {
    color:aqua;
}
a#tab-2:hover {
    color:red;
}
a#tab-3:hover {
    color:green;
}
a#tab-4:hover {
    color:gray;
}
a#tab-5:hover {
    color:yellow;
}
a#tab-6:hover {
    color:gold;
}
a#tab-7:hover {
    color:blue;
}

您可以使背景图像透明。这是Demo.

#container {
   position: relative;
}
#container:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://lorempixel.com/300/300); 
    width: 300px;
    height: 300px;
    opacity : 0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}

如果使用 RGBA 属性。所有现代浏览器都支持它。但是要在 IE8 或更低的环境下工作，则需要使用 filter。

/* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Answer 4

不是#tab-7 a.hover，它不正确。使用这个#tab-7:hover

或

#tab-7.active

Answer 5

TLDR；

演示： CodePen

你想使用CSS Pseudo class：:hover

a#tab-2:active,
a#tab-2:hover {
    background-color: #159B77;
}

有很多很好的资源可以做这样的事情。

---

Pseudo classes MDN 上：

CSS pseudo-class 是添加到选择器的关键字 指定要选择的元素的特殊状态。例如 :hover会 当用户将鼠标悬停在由 选择器。

伪类，加上伪元素，让你应用一种风格 不仅与文档内容有关的元素 树，但也与外部因素有关，如历史 航海家 (:visited, 例如），其内容的状态（如 :checked 在某些表单元素上）或鼠标的位置（例如 :hover 它可以让你知道鼠标是否在一个元素上）。

语法：

selector:pseudo-class {
  property: value;
}

所以在你的情况下，它会是：

a#tab-2:active,
a#tab-2:hover {
    background-color: #159B77;
}

---

更多关于来自 MDN 的:hover：

当用户指定一个 :hover CSS 伪类时匹配 带有指针设备的元素，但不一定会激活它。 这种风格可以被任何其他与链接相关的伪类覆盖， 那是 :link, :visited, 和 :active, 出现在后续规则中。为了适当地设置链接样式， 您需要将 :hover 规则放在 :link 和 :visited 规则之后，但是 在 :active 之前，由 LVHA-order 定义: :link — :visited — :hover — :active。

可视化用户代理，例如 Firefox、Internet Explorer、Safari、Opera 或 Chrome，当光标（鼠标指针）时应用关联样式 悬停在一个元素上。