Html 如何在内联 CSS 中编写 a:hover？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1033156/
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
How to write a:hover in inline CSS?
提问by Amr Elgarhy
I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.
我有一个案例，我必须编写内联 CSS 代码，并且我想在锚点上应用悬停样式。
How can I use a:hoverin inline CSS inside the HTML style attribute?
如何a:hover在 HTML 样式属性内使用内联 CSS？
E.g. you can't reliably use CSS classes in HTML emails.
例如，您不能在 HTML 电子邮件中可靠地使用 CSS 类。
采纳答案by Jonathan Fingland
Short answer: you can't.
简短的回答：你不能。
Long answer: you shouldn't.
长答案：你不应该。
Give it a class name or an id and use stylesheets to apply the style.
给它一个类名或一个 id 并使用样式表来应用样式。
:hoveris a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).
:hover是一个伪选择器，对于CSS，只在样式表中有意义。没有任何内联样式的等效项（因为它没有定义选择标准）。
Response to the OP's comments:
对 OP 评论的回应：
See Totally Pwn CSS with Javascriptfor a good script on adding CSS rules dynamically. Also see Change style sheetfor some of the theory on the subject.
有关动态添加 CSS 规则的好脚本，请参阅Totally Pwn CSS with Javascript。有关该主题的一些理论，另请参阅更改样式表。
Also, don't forget, you can add links to external stylesheets if that's an option. For example,
另外，不要忘记，如果这是一个选项，您可以添加指向外部样式表的链接。例如，
<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>
Caution: the above assumes there is a headsection.
注意：以上假设有一个头部部分。
回答by Alex S
You can get the same effect by changing your styles with JavaScript in the onMouseOverand onMouseOutparameters, although it's extremely inefficient if you need to change more than one element:
您可以通过在onMouseOver和onMouseOut参数中使用 JavaScript 更改样式来获得相同的效果，但如果您需要更改多个元素，则效率极低：
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>Also, I can't remember for sure if thisworks in this context. You may have to switch it with document.getElementById('idForLink').
另外，我不记得是否this在这种情况下有效。您可能必须使用document.getElementById('idForLink').
回答by fuddin
You could do itat some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't .
回答by lukesrw
I'm extremely late contributing to this, however I was sad to see no one suggested this, if you actually require inline code, this is possible to do. I needed it for some hover buttons, the method is this:
我对此做出贡献非常晚，但是我很遗憾看到没有人建议这样做，如果您确实需要内联代码，则可以这样做。我需要一些悬停按钮，方法是这样的：
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</aIn this case, the inline code: "background-color: red;" is the switch colour on hover, put the colour you need into there and then this solution works. I realise this may not be the perfect solution in terms of compatibility however this works if it is absolutely needed.
在这种情况下，内联代码：“background-color: red;” 是悬停时的切换颜色，将您需要的颜色放入其中，然后此解决方案有效。我意识到这在兼容性方面可能不是完美的解决方案，但是如果绝对需要，它可以工作。
回答by Rex M
You can't do exactly what you're describing, since a:hoveris part of the selector, not the CSS rules. A stylesheet has two components:
您不能完全按照您的描述进行操作，因为它a:hover是选择器的一部分，而不是 CSS 规则。样式表有两个组件：
selector {rules}
Inline styles only have rules; the selector is implicit to be the current element.
内联样式只有规则；选择器隐式为当前元素。
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
选择器是一种表达性语言，它描述了一组标准来匹配类似 XML 的文档中的元素。
However, you can get close, because a styleset can technically go almost anywhere:
但是，您可以接近，因为从style技术上讲，一组几乎可以去任何地方：
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
回答by T.Todua
using Javascript:
使用 JavaScript：
a) Adding inline style
a) 添加内联样式
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
b) or a bit harder method - adding "mouseover"
b) 或者更难的方法 - 添加“鼠标悬停”
document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };
Note: multi-word styles (i.e.font-size) in Javascript are written together:
注意：font-sizeJavascript 中的多字样式（即）写在一起：
element.style.fontSize="12px"
element.style.fontSize="12px"
回答by user1476842
This is the best code example:
这是最好的代码示例：
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>Moderator Suggestion: Keep your separation of concerns.
主持人建议：保持关注点分离。
HTML
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>JS
JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}回答by inkedmn
Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).
当前的 CSS 迭代不支持内联伪类声明（不过，据我所知，它可能会在未来的版本中出现）。
For now, your best bet is probably to just define a style block directly above the link you want to style:
现在，最好的办法可能是在要设置样式的链接正上方定义一个样式块：
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
回答by rutherford
回答by Joel
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.
Hover 是一个伪类，因此不能与 style 属性一起应用。它是选择器的一部分。
