Question

可能重复：
How to write a:hover in inline CSS?

我需要生成一些自包含的HTML代码，因此我无法使用任何外部样式表或样式标记。

其中一个要求是链接必须具有hover，visited状态等。我知道如何使用样式表执行此操作，但我该如何进行内联？即我应该在style属性中添加什么：

<a style="???" href="http://example.com">Link</a>

Answer 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”）添加到您想要覆盖的链接元素，并根据需要更改效果。

Answer 2

对于那些感兴趣的人，我最后在我的代码之前添加了<style>标记：

<style>.my-link:hover { text-decoration:underline !important; }</style>

这不是标准的，因为<style>标签应该在<head>内。但它适用于最新版本的IE，Firefox，Safari和Chrome。无论如何最糟糕的情况是：悬停状态不会对选定的链接起作用。

如何使用style属性分配a：hover，a：visited等

2 个答案: