如何仅使用样式属性分配 a:hover、a:visited 等 [重复]
Posted
技术标签:
【中文标题】如何仅使用样式属性分配 a:hover、a:visited 等 [重复]【英文标题】：How to assign a:hover, a:visited, etc. using the style attribute only [duplicate] 【发布时间】：2011-10-21 10:17:02 【问题描述】：可能重复：How to write a:hover in inline CSS?
我需要生成一些自包含的 html 代码，所以我不能使用任何外部样式表或样式标签。
其中一个要求是链接必须具有hover、visited 状态等。我知道如何使用样式表来做到这一点，但我该如何内联呢？即我应该在样式属性中添加什么：
<a style="???" href="http://example.com">Link</a>
【问题讨论】：
这里值得一读：***.com/questions/1033156/… 为什么不能在样式表或样式标签中做呢？ 因为我无法访问嵌入我的代码的<head> 标记。
ninetwozero，这个问题不太好。选定的答案只是告诉发布者不要这样做。很明显，我们谁都不想做这种事情，但有时我们别无选择。显然，这里的解决方案是使用 javascript，但不确定如何。
你不能使用内联样式。没有为伪类/元素定义内联样式。
【参考方案1】：
您可以使用 Javascript 来管理它：
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++)
if(links[i].className == "hoverThis")
DoHover(links[i]);
function DoHover(link_element)
link_element.onmouseover = function()
this.style.display = "block";
link_element.onmouseout = function()
this.style.display = "none";
只需将适当的类（在本例中为“hoverThis”）添加到您想要过度效果的链接元素，并根据需要更改效果。
【讨论】：
【参考方案2】：对于那些感兴趣的人，我最终在我的代码之前添加了一个<style> 标签：
<style>.my-link:hover text-decoration:underline !important; </style>
这不是标准的，因为<style> 标签应该在<head> 内。但是它适用于最新版本的 IE、Firefox、Safari 和 Chrome。无论如何可能发生的最糟糕的情况是 :hover 状态在选定的链接上不起作用。
【讨论】：
你的意思是<head>，当然<header>是一个完全不同的元素:)
糟糕，我已经更新了答案。以上是关于如何仅使用样式属性分配 a:hover、a:visited 等 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
React 中的内联 CSS 样式：如何实现 a:hover？
为啥 a:hover 不能在没有 href 属性的锚上工作？