我有一个案例，我必须编写内联 CSS 代码，并且我想在锚点上应用悬停样式。
如何a:hover在 HTML 样式属性内的内联 CSS 中使用？
例如，您不能在 HTML 电子邮件中可靠地使用 CSS 类。
问问题
1320438 次
26 回答
669
简短的回答：你不能。
长答案：你不应该。
给它一个类名或一个 id 并使用样式表来应用样式。
:hover是一个伪选择器，对于CSS来说，只在样式表中有意义。没有任何等效的内联样式（因为它没有定义选择标准）。
回复 OP 的评论：
有关动态添加 CSS 规则的好脚本，请参阅Totally Pwn CSS with Javascript 。另请参阅更改样式表以了解有关该主题的一些理论。
另外，不要忘记，如果可以的话，您可以添加指向外部样式表的链接。例如，
<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>
注意：以上假设有一个头部。
于 2009-06-23T15:09:04.513 回答
561
onMouseOver您可以通过在and参数中使用 JavaScript 更改样式来获得相同的效果onMouseOut，但如果您需要更改多个元素，则效率极低：
<a href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'" >Text</a>另外，我不记得this在这种情况下是否有效。您可能需要将其切换为document.getElementById('idForLink').
于 2009-06-23T15:16:17.133 回答
59
你可以在过去的某个时候做到这一点。但是现在（根据同一标准的最新版本，即候选推荐）你不能。
于 2012-03-27T05:59:30.967 回答
44
您不能完全按照您的描述进行操作，因为a:hover它是选择器的一部分，而不是 CSS 规则的一部分。样式表有两个组件：
selector {rules}
内联样式只有规则；选择器隐含为当前元素。
选择器是一种表达性语言，它描述了一组标准以匹配类似 XML 的文档中的元素。
但是，您可以接近，因为从style技术上讲，一组几乎可以去任何地方：
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
于 2009-06-23T15:10:13.433 回答
39
我对此做出贡献的时间非常晚，但是我很遗憾没有人建议这样做，如果您确实需要内联代码，则可以这样做。我需要一些悬停按钮，方法是这样的：
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}<a style="background-color: red;">
<div class="hover-item">
Content
</div>
</a在这种情况下，内联代码：“background-color: red;” 是悬停时的开关颜色，把你需要的颜色放在那里，然后这个解决方案就起作用了。我意识到这在兼容性方面可能不是完美的解决方案，但是如果绝对需要，它可以工作。
于 2015-08-10T09:41:09.420 回答
32
使用 Javascript：
a) 添加内联样式
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
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',''); };
font-size注意： Javascript中的多词样式（即）是一起写的：
element.style.fontSize="12px"
于 2013-07-22T08:33:46.317 回答
22
这是最好的代码示例：
<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>主持人建议：保持关注点分离。
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>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'
}于 2018-01-13T21:31:38.647 回答
18
虽然定义内联悬停规则似乎是不可能的，但您可以使用 CSS 变量内联定义样式的值：
:hover {
color: var(--hover-color);
}<a style="--hover-color: green">
Library
</a>考虑使用除了选择器之外的属性或类（例如[hover-color]:hover），以允许与其他低特异性悬停颜色更改规则共存。（例如来自 CSS 重置或使用默认样式的某些元素）
于 2021-03-12T10:08:01.843 回答
12
当前的 CSS 迭代不支持内联伪类声明（不过，据我了解，它可能会出现在未来的版本中）。
现在，您最好的选择可能是直接在您想要设置样式的链接上方定义一个样式块：
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
于 2009-06-23T15:11:18.877 回答
9
正如所指出的，您不能为悬停设置任意内联样式，但您可以在CSS中使用相应标记中的以下内容更改悬停光标的样式：
style="cursor: pointer;"
于 2013-05-01T12:58:35.460 回答
8
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover 是一个伪类，因此不能与样式属性一起应用。它是选择器的一部分。
于 2009-06-23T15:10:57.380 回答
8
你可以这样做。但不是内联样式。您可以使用onmouseover和onmouseout事件：
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>于 2018-11-15T19:52:51.310 回答
5
没有办法做到这一点。您的选择是使用 JavaScript 或 CSS 块。
也许有一些 JavaScript 库会将专有样式属性转换为样式块。但是代码将不符合标准。
于 2009-06-23T15:11:38.110 回答
5
根据您的评论，无论如何您都在发送一个 JavaScript 文件。在 JavaScript 中进行翻转。jQuery的$.hover()方法使它变得简单，就像所有其他 JavaScript 包装器一样。直接使用 JavaScript 也不太难。
于 2009-06-23T15:13:54.317 回答
5
您可以编写各种类型的代码
首先我可以写这个
html
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
css
.one{
text-decoration: none;
}
你可以尝试另一种方式
html
<a href="https://www.google.com/" class="one">Hello siraj</a>
css
.one{
text-decoration: none;
}
.one:hover{
color:blue;
}
.one:active{
color: red;
}
您也可以尝试在 jquery 中悬停
脚本
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
html
<p>Hover the mouse pointer over this paragraph.</p>
在这段代码中，你在 jquery 中有一个三个函数，首先你准备了一个函数，它是 jquery 的基本功能，然后你在这个函数中有一个悬停函数，当你悬停一个指向文本的指针时，颜色会改变，然后是下一个当您释放指向文本的指针时，它将是不同的颜色，这是第三个功能
于 2020-01-07T01:35:32.320 回答
4
我只是想出了一个不同的解决方案。
我的问题：我<a>在一些幻灯片/主要内容查看器周围有一个标签，以及<a>页脚中的标签。我希望他们去 IE 中的同一个地方，所以整个段落都会加下划线onHover，即使它们不是链接：整个幻灯片是一个链接。IE 不知道区别。我的页脚中还有一些需要下划线和颜色更改的实际链接onHover。我以为我必须将样式与页脚标签内联才能使颜色发生变化，但上面的建议表明这是不可能的。
解决方案：我给页脚链接两个不同的类，我的问题就解决了。我能够onHover在一节课中改变颜色，让幻灯片onHover没有颜色改变/下划线，并且仍然能够同时在页脚和幻灯片中拥有外部 HREFS！
于 2011-09-08T16:57:22.413 回答
1
这在游戏中已经很晚了，但是您什么时候会在 HTML 电子邮件中使用 JavaScript？例如，在我目前工作的公司（与 Abodee 押韵），我们在大多数电子邮件营销活动中使用最低公分母——只是没有使用 JavaScript。曾经。除非您指的是某种预处理。
正如一篇相关文章中提到的：“Lotus Notes、Mozilla Thunderbird、Outlook Express 和 Windows Live Mail 似乎都支持某种 JavaScript 执行。没有其他支持。”
链接到该文章的来源：[ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]
此外，悬停如何转化为移动设备？这就是为什么我喜欢上面的答案：Long answer: you shouldn't.
如果有人对此主题有更多见解，请随时纠正我。谢谢你。
于 2017-12-12T21:13:11.857 回答
1
所以这不是用户正在寻找的东西，但我发现这个问题正在寻找答案并想出了一些相关的东西。我有一堆重复的元素，它们需要一个新的颜色/悬停在其中的标签上。我使用把手，这是我的解决方案的关键，但其他模板语言也可以工作。
我定义了一些颜色并将它们传递到每个元素的车把模板中。在模板的顶部，我定义了一个样式标签，并放入了我的自定义类和悬停颜色。
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
然后我使用了模板中的样式：
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
您可能不需要!important
于 2018-12-06T22:15:52.970 回答
0
虽然“你不应该”的上下文可能适用，但在某些情况下你仍然想实现这一点。我的用例是根据某些数据值动态设置悬停颜色，以仅使用 CSS 即可从特异性中受益。
仅接近 CSS
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
然后你的标记会有点像：
标记
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
我正在使用车把做这个例子，但想法是你采取任何方便你的用例来设置内联样式（即使它是手动编写悬停时的颜色你想要的）
于 2021-01-31T11:42:58.690 回答
0
您可以像这样使用内联样式表语句：
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
于 2021-10-23T21:18:23.973 回答
-1
现在可以使用Hacss。
于 2020-05-16T00:18:23.140 回答
-3
a:hover您只能在外部样式表中使用伪类。因此我推荐使用外部样式表。代码是：
a:hover {color:#FF00FF;} /* Mouse-over link */
于 2012-06-19T12:18:39.250 回答
-3
你可以通过添加一个类来做 id ，但不要内联。
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
2 行，但您可以在任何地方重复使用该类。
于 2014-08-04T19:47:27.657 回答
-3
我不得不避免使用 javascript，但可以使用服务器端代码。只能在调用该代码的地方访问一组元素。它必须与现有的 JavaScript 一起工作，因此数据属性不会干扰。
所以我生成了一个存储在 data 属性中的 id，创建了一个样式块，生成了带有该 id 的链接。是的，它的有效 HTML。只是不是最佳实践。
/* for the demo code here */
a {
text-decoration: none;
color: blue;
}
a:hover {
color: blue;
font-weight: bold;
}<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
a[data-hover="rnd-id-123"] { color: green; }
a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>
<br>
<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
a[data-hover="rnd-id-456"] { color: purple; }
a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>于 2019-01-19T14:38:00.977 回答
-4
我的问题是我正在构建一个网站，该网站使用大量图像图标，这些图像图标必须在悬停时由不同的图像交换（例如，蓝色图像在悬停时变成红色）。我为此制作了以下解决方案：
.container div {
width: 100px;
height: 100px;
background-size: 100px 100px;
}
.container:hover .withoutHover {
display: none;
}
.container .withHover {
display: none;
}
.container:hover .withHover {
display: block;
}<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>我介绍了一个包含这对图像的容器。第一个是可见的，另一个是隐藏的（显示：无）。悬停容器时，第一个变为隐藏（显示：无），第二个再次显示（显示：块）。
于 2016-08-29T19:05:09.900 回答