Pseudo classes：

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

您正在选择<a> #tab-2子项，以及使用错误的伪选择器。

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

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

Answer 3

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

OR

#tab-7.active

Answer 4

这样，您可以在鼠标悬停时更改每个链接的颜色。这是工作 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 5

<强> TLDR;

DEMO： CodePen

您想使用CSS Pseudo class：:hover

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

这样的事情有很好的资源。

MDN上的

Pseudo classes：

CSS 伪类是添加到选择器的关键字   指定要选择的元素的特殊状态。例如   :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规则之后   在：活动的一个之前，由 LVHA-order :: link - 定义   ：visit - ：hover - ：active。

可视用户代理，如Firefox，Internet Explorer，Safari，Opera或   Chrome，光标时应用关联的样式（鼠标指针）   盘旋在一个元素上。

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

5 个答案:

Pseudo classes：

语法：

更多关于来自MDN的:hover：