Html CSS a：悬停内联？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16777474/
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
CSS a:hover inline?
提问by Rudi Kershaw
I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul>to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?
我一直在尝试为我正在制作的网站创建一个导航栏，我希望每个按钮在突出显示时显示不同的颜色。我曾经<ul>创建过导航栏。问题是，有没有办法在特定元素上使用“a:hover {background:#;}”作为内联 CSS？
I have tried giving each <li>or <a>an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;
我曾尝试给每个<li>或<a>一个 id，然后在内部样式表中创建对它们的引用，但无法使其工作。以下是我到目前为止所拥有的；
#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px}
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'>XML</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>C#</a></li>
</ul>
</div>
Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.
请注意，我已经使用 html 和 CSS 整整 1 周了。因此，如果这是一个愚蠢的问题，我深表歉意。谢谢。
回答by SLaks
That's completely impossible; sorry.
那是完全不可能的；对不起。
Instead, you can create a CSS class for each color and apply the appropriate class to each link:
相反，您可以为每种颜色创建一个 CSS 类，并将适当的类应用于每个链接：
#menu a.red:hover { background: red; }
回答by Sourabh
If you use :nth-child(X)pseudo class, you can do this without adding a class to every new liyou add. For this, I had to move the background-colorto liand also added a few other CSS properties, nothing much.
如果您使用:nth-child(X)伪类，则无需向添加的每个新类添加类即可执行此操作li。为此，我不得不移动background-colortoli并添加了一些其他 CSS 属性，没什么。
This will be your CSS for adding color:
这将是用于添加颜色的 CSS：
#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }
回答by davidcondrey
Inline javascript
内联 JavaScript
<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>
In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:
在CSS2 规范的工作草案中，声明您可以像这样内联使用伪类：
<a href="http://www.w3.org/Style/CSS"
style="{color: blue; background: white} /* a+=0 b+=0 c+=0 */
:visited {color: green} /* a+=0 b+=1 c+=0 */
:hover {background: yellow} /* a+=0 b+=1 c+=0 */
:visited:hover {color: purple} /* a+=0 b+=2 c+=0 */
">
</a>
but it was never implemented in the release of the spec as far as I know.
但据我所知，它从未在规范的发布中实现。
http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules
http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules
回答by Nabil Ghulam
You could achieve this with jquery :)
你可以用 jquery 来实现这一点:)
$(document).ready(function() {
$('a').hover(function(){
$(this).parent().css({background-color: 'yellow'});
});
});
