Html 设置一个：基于类的悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1935820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set a:hover based on class
提问by Andrew Hare
I have the following HTML:
我有以下 HTML：
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hoverfor these menu items to a particular color. So I write:
在 CSS 中，我想将a:hover这些菜单项的 设置为特定颜色。所以我写：
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hovercolor only for those <a>tags with the class main-nav-itemand not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a>tags within the menudiv should change color on hover except the one with the currentclass.
但是，我只想a:hover为那些<a>具有类main-nav-item而不是main-nav-item-current 的标签设置此颜色，因为它具有不同的颜色并且不应在悬停时更改。菜单div 中的所有<a>标签都应在悬停时更改颜色，但当前类的标签除外。
How can I do it using CSS?
我如何使用 CSS 做到这一点？
I tried something like
我试过类似的东西
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
认为只有具有 main-nav-item 类的那些会在悬停时改变颜色，而不是当前的。但它不起作用。
回答by Andrew Hare
Try this:
尝试这个：
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The adefines the element, the .main-nav-itemqualifiesthe element to only those which have that class, and finally the psuedo-class :hoveris applied to the qualified expression that comes before.
为了理解它是如何工作的，按照浏览器的方式阅读它是很重要的。该a定义元件，所述.main-nav-item认证了的元件仅那些具有类，最后是伪类:hover被施加到到来之前的合格表达。
Basically it boils down to this:
基本上它归结为：
Apply this hover rule to all anchor elements with the class
main-nav-itemthat are a descendant child of any element with the classmenu.
将此悬停规则应用于具有 class 的所有锚元素，这些元素是具有 class
main-nav-item的任何元素的后代元素menu。
回答by Scott Radcliff
Cascading is biting you. Try this:
级联正在咬你。尝试这个：
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
这段代码说要抓取所有具有 main-nav-item 类并且是类菜单的子项的链接，并在它们悬停时应用颜色 #DDD。
回答by Rizo
Set a:hover based on class you can simply try:
设置 a:hover 基于类，您可以简单地尝试：
a.main-nav-item:hover { }
回答by KNiF3
try this
尝试这个
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
假设我们在代码中使用了一个锚标记，并且在主程序中调用了类“div”。a:hover 会做这件事，当鼠标移到它上面时，它会给背景一个吸血鬼黑色，给文本一个白色，这就是悬停的意思。
回答by Aleksej Dix
how about
.main-nav-item:hover
怎么样
.main-nav-item:hover
this keeps the specificity low
这使特异性保持低
回答by DanDan
One common error is leaving a space before the class names. Even if this was the correct syntax:
一个常见的错误是在类名前留一个空格。即使这是正确的语法：
.menu a:hover .main-nav-item
it never would have worked.
它永远不会奏效。
Therefore, you would not write
因此，你不会写
.menu a .main-nav-item:hover
it would be
这将是
.menu a.main-nav-item:hover
