2

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 it inline? i.e. what should I put in the style attribute:

<a style="???" href="http://example.com">Link</a>
Community
  • 1
  • 1
laurent
  • 88,262
  • 77
  • 290
  • 428
  • 3
    Here's something worth reading: http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css – karllindmark Aug 06 '11 at 10:42
  • Why can't you do it in a style sheet or style tag? – Pelshoff Aug 06 '11 at 10:44
  • Because I do not have access to the `` tag where my code is embedded. – laurent Aug 06 '11 at 10:45
  • ninetwozero, this question is not so good. The selected answer just tells the poster not to do it. Well obviously, none of us want to do this kind of things but sometime we don't have the choice. Apparently, the solution here is to use JavaScript but not sure how. – laurent Aug 06 '11 at 10:59
  • You can't do it in an inline style. Inline styles aren't defined for pseudo-classes/elements. – BoltClock Aug 06 '11 at 11:08

2 Answers2

1

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.

Luis Perez
  • 27,650
  • 10
  • 79
  • 80
silverstrike
  • 522
  • 2
  • 7
1

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.

laurent
  • 88,262
  • 77
  • 290
  • 428