如何在内联 CSS 中编写 a:hover？
我有一个案例，我必须编写内联 CSS 代码，并且我想在锚点上应用悬停样式。
如何在 HTML 样式属性内的内联 CSS 中使用 a:hover？
例如，您不能在 HTML 电子邮件中可靠地使用 CSS 类。
简短的回答：你不能。
长答案：你不应该。
给它一个类名或一个 id 并使用样式表来应用样式。
:hover 是一个伪选择器，对于 CSS，只在样式表中有意义。没有任何等效的内联样式（因为它没有定义选择标准）。
回复 OP 的评论：
请参阅 Totally Pwn CSS with Javascript 了解动态添加 CSS 规则的好脚本。另请参阅Change style sheet，了解有关该主题的一些理论。
另外，不要忘记，如果可以的话，您可以添加指向外部样式表的链接。例如，
<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>
注意：以上假设有一个 head 部分。
您可以通过在 onMouseOver 和 onMouseOut 参数中使用 JavaScript 更改样式来获得相同的效果，但如果您需要更改多个元素，则效率极低：
此外，我无法确定 this 在这种情况下是否有效。您可能必须用 document.getElementById('idForLink') 切换它。
<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...
li.selected {...} 是否也有一个聪明的技巧？
You could do it 在过去的某个时间点。但是现在（根据同一标准的最新版本，即候选推荐）你不能。
<a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> 但它不起作用
您不能完全按照您的描述进行操作，因为 a:hover 是选择器的一部分，而不是 CSS 规则。样式表有两个组件：
selector {rules}
内联样式只有规则；选择器隐含为当前元素。
选择器是一种表达性语言，它描述了一组标准以匹配类似 XML 的文档中的元素。
但是，您可以接近，因为从技术上讲，style 集几乎可以去任何地方：
<html>
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>
</html>
<html> </html> 标记下
我对此做出贡献的时间非常晚，但是我很遗憾没有人建议这样做，如果您确实需要内联代码，则可以这样做。我需要一些悬停按钮，方法是这样的：
.hover-item { 背景颜色：#FFF; } .hover-item:hover { 背景颜色：继承； }
在这种情况下，内联代码：“background-color: red;”是悬停时的开关颜色，把你需要的颜色放在那里，然后这个解决方案就起作用了。我意识到这在兼容性方面可能不是完美的解决方案，但是如果绝对需要，它可以工作。
使用 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',''); };
注意：Javascript 中的多字样式（即font-size）是一起写的：
element.style.fontSize="12px"
这是最好的代码示例：
主持人建议：保持关注点分离。
HTML
JS
const libLink = document.getElementsByClassName("lib-link")[0]; // 数组 0 假设只有其中一个链接， // 您必须循环或使用事件委托来处理多个链接 // 但我们不会在这里讨论 libLink.onmouseover = function () { this.style. color='#0F0' } libLink.onmouseout = function () { this.style.color='#00F' }
虽然定义内联悬停规则似乎是不可能的，但您可以使用 CSS 变量内联定义样式的值：
:hover { 颜色: var(--hover-color); } 库
考虑使用除选择器之外的属性或类（例如 [hover-color]:hover）以允许与其他低特异性悬停颜色更改规则共存。 （例如来自 CSS 重置或使用默认样式的某些元素）
当前的 CSS 迭代不支持内联伪类声明（不过，据我了解，它可能会出现在未来的版本中）。
现在，您最好的选择可能是直接在您想要设置样式的链接上方定义一个样式块：
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>
<style>a:hover { }</style>
<a href="/">Go Home</a>
Hover 是一个伪类，因此不能与样式属性一起应用。它是选择器的一部分。
你可以这样做。但不是内联样式。您可以使用 onmouseover 和 onmouseout 事件：
根据您的评论，无论如何您都在发送一个 JavaScript 文件。在 JavaScript 中进行翻转。 jQuery 的 $.hover() 方法使其变得简单，其他所有 JavaScript 包装器也是如此。直接使用 JavaScript 也不太难。
没有办法做到这一点。您的选择是使用 JavaScript 或 CSS 块。
也许有一些 JavaScript 库会将专有样式属性转换为样式块。但是代码将不符合标准。
您可以编写各种类型的代码
首先我可以写这个
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 的基本功能，然后你在这个函数中有一个悬停函数，当你悬停一个指向文本的指针时，颜色会改变，然后是下一个当您释放指向文本的指针时，它将是不同的颜色，这是第三个功能
我只是想出了一个不同的解决方案。
我的问题：我在一些幻灯片/主要内容查看器周围有一个 <a> 标记，在页脚中有一个 <a> 标记。我希望他们转到 IE 中的同一个位置，因此整个段落将带有下划线 onHover，即使它们不是链接：整个幻灯片是一个链接。 IE 不知道区别。我的页脚中还有一些实际链接需要下划线和颜色更改 onHover。我以为我必须将样式与页脚标签内联才能使颜色发生变化，但上面的建议表明这是不可能的。
解决方案：我给页脚链接两个不同的类，我的问题就解决了。我能够在一个类中更改 onHover 颜色，让幻灯片 onHover 没有颜色更改/下划线，并且仍然能够同时在页脚和幻灯片中使用外部 HREFS！
这在游戏中已经很晚了，但是您什么时候会在 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.
如果有人对此主题有更多见解，请随时纠正我。谢谢你。
所以这不是用户正在寻找的东西，但我发现这个问题正在寻找答案并想出了一些相关的东西。我有一堆重复的元素，它们需要一个新的颜色/悬停在其中的标签上。我使用把手，这是我的解决方案的关键，但其他模板语言也可以工作。
我定义了一些颜色并将它们传递到每个元素的车把模板中。在模板的顶部，我定义了一个样式标签，并放入了我的自定义类和悬停颜色。
<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
虽然“你不应该”的上下文可能适用，但在某些情况下你仍然想实现这一点。我的用例是根据某些数据值动态设置悬停颜色，以仅使用 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>
我正在使用车把做这个例子，但想法是你采取任何方便你的用例来设置内联样式（即使它是手动编写悬停时的颜色你想要的）
不完全是内联 CSS，但它是内联的大声笑
<a
href="abc.html"
onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'"
>Text</a
>
您可以像这样使用内联样式表语句：
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
您只能在外部样式表中使用伪类 a:hover。因此我推荐使用外部样式表。代码是：
a:hover {color:#FF00FF;} /* Mouse-over link */
style 标记即可。
你可以通过添加一个类来做 id ，但不要内联。
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
2 行，但您可以在任何地方重复使用该类。
我的问题是我正在构建一个网站，该网站使用大量图像图标，这些图像图标必须在悬停时由不同的图像交换（例如，蓝色图像在悬停时变成红色）。我为此制作了以下解决方案：
.container div { 宽度：100px;高度：100px；背景尺寸：100px 100px； } .container:hover .withoutHover { 显示：无； } .container .withHover { 显示：无； } .container:hover .withHover { 显示：块； }
悬停图像以查看它与其他图像的切换。请注意，我特意使用内联 CSS，因为我认为它是解决我的问题的最简单和最清晰的解决方案，它使用更多这些图像对（具有不同的 URL）。
我介绍了一个包含这对图像的容器。第一个是可见的，另一个是隐藏的（显示：无）。悬停容器时，第一个变为隐藏（显示：无），第二个再次显示（显示：块）。
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
style="{color:green;} :hover { color: red; }"进行了测试，Firefox 设法将链接着色为绿色，但忽略了悬停。 Chrome 忽略了两者。继续测试将毫无意义。