Html 在 CSS 中充当 :hover 的内联样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/131653/
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
Inline style to act as :hover in CSS
提问by raldi
I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:
我知道将 CSS 样式直接嵌入到它们影响的 HTML 标签中会破坏 CSS 的大部分目的，但有时它对于调试目的很有用，例如：
<p style="font-size: 24px">asdf</p>
What's the syntax for embedding a rule like:
嵌入规则的语法是什么：
a:hover {text-decoration: underline;}
into the style attribute of an A tag? It's obviously not this...
进入 A 标签的 style 属性？显然不是这个……
<a href="foo" style="text-decoration: underline">bar</a>
...since that would apply all the time, as opposed to just during hover.
...因为这将一直适用，而不是仅在悬停期间。
回答by Glenn Slaven
I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.
恐怕做不到，伪类选择器不能内联设置，你必须在页面或样式表上做。
I should mention that technicallyyou shouldbe able to do it according to the CSS spec, but most browsers don't support it
我应该提到，从技术上讲，您应该能够根据 CSS 规范来执行此操作，但是大多数浏览器不支持它
Edit:I just did a quick test with this:
编辑：我刚刚做了一个快速测试：
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>
And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?
它不适用于 IE7、IE8 beta 2、Firefox 或 Chrome。其他人可以在任何其他浏览器中测试吗？
回答by Aleksi Yrttiaho
If you are only debugging, you might use javascript to modify the css:
如果你只是调试，你可以使用javascript来修改css：
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
回答by Rodrick Chapman
If it's for debugging, just add a css class for hovering (since elements can have more than one class):
如果是为了调试，只需添加一个用于悬停的 css 类（因为元素可以有多个类）：
a.hovertest:hover
{
text-decoration:underline;
}
<a href="http://example.com" class="foo bar hovertest">blah</a>
回答by Roberto
A simple solution:
一个简单的解决方案：
<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>
Or
或者
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
回答by Josh Kernich
I put together a quick solution for anyone wanting to create hover popups without CSS using the onmouseover and onmouseout behaviors.
我为任何想要使用 onmouseover 和 onmouseout 行为创建没有 CSS 的悬停弹出窗口的人提供了一个快速解决方案。
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
回答by michielbdejong
If that <p>tag is created from JavaScript, then you do have another option: use JSS to programmatically insert stylesheets into the document head. It does support '&:hover'. https://cssinjs.org/
如果该<p>标签是从 JavaScript 创建的，那么您还有另一个选择：使用 JSS 以编程方式将样式表插入到文档头中。它确实支持'&:hover'. https://cssinjs.org/
回答by CMPalmer
I don't think jQuerysupports the pseudo-selectors either, but it does provide a quick way to add events to one, many, or all of your similar controls and tags on a single page.
我也不认为jQuery支持伪选择器，但它确实提供了一种快速的方法来向单个页面上的一个、多个或所有类似控件和标签添加事件。
Best of all, you can chain the event binds and do it all in one line of script if you want. Much easier than manually editing all of the HTML to turn them on or off. Then again, since you can do the same in CSS I don't know that it buys you anything (other than learning jQuery).
最重要的是，如果需要，您可以链接事件绑定并在一行脚本中完成所有操作。比手动编辑所有 HTML 以打开或关闭它们要容易得多。再说一次，因为你可以在 CSS 中做同样的事情，我不知道它会给你带来什么（除了学习 jQuery）。
