How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]_问答_开发者

How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

开发者 https://www.devze.com 2023-03-26 13:20 出处：网络

This question already has answers here: Closed 11 years ago. Possible Duplicate: How to write a:hover in inline CSS?

This question already has answers here: Closed 11 years ago.

Possible Duplicate:
How to write a:hover in inline CSS?

I need to generate some self-contained HTML code, so I cannot use any external stylesheet or style tag.

One of the requirement is that a link must have a hover, visited state etc. I know how to do that with a stylesheet, but how can I do i开发者_开发技巧t inline? i.e. what should I put in the style attribute:

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

You can manage it with 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";
  }
}

Just add the appropriate class ("hoverThis" in this example) to the links elements you want the over effect on, and alter effect as needed.

For those interested, I ended up adding a <style> tag just before my code:

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

This is not standard since <style> tags are supposed to be inside the <head>. However it works on the latest versions of IE, Firefox, Safari and Chrome. The worst that could happen anyway is that the :hover state won't work on the selected links.