How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]
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.
加载中,请稍侯......
精彩评论