Inline CSS for anchor tag and hover
I'm under the impression that changing an anchor tag on hover can 开发者_如何学编程be done like this:
a:hover {background: #FFDD00;}
a:hover {color: #AAAAAA;}
Correct me if I'm wrong.
Now, for some convoluted reason, I can't put that code in a style sheet, I have to put it in the actual HTML. How would I do that?
<a href="..." style="___???___">...</a>
There's no way to do that.
Inline CSS can't touch pseudo-classes such as :hover.
I'm guessing the reason you want to do this is because you can only edit the <body> of the HTML (for whatever reason). What you can do is add a style element:
<style>
a:hover {
background: #FFDD00;
color: #AAAAAA;
}
</style>
<a href="#">...</a>
Having a style element outside the <head> is not valid HTML, but (crucially) it does work in all browsers.
If you can't toss your hover CSS into a tag, then the best way to handle this is going to be JavaScript. I wouldn't ordinarily call this a good approach, but it sounds like your hands are tied here.
<a href="..."
onmouseover="this.style.backgroundColor='#ffdd00';this.style.color='#aaaaaa'"
onmouseout="this.style.backgroundColor='transparent';this.style.color='inherit'">
...
</a>
Hope that works for you!
Found this in an old forum and it seems to work great :)
<a href="###" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">###</a>
You can put both styles in the same block, like this.
a:hover {
background: #FFDD00;
color: #AAAAAA;
}
And if you cannot use an external stylesheet, you can add a style block to the head of your page...
...
<style>
a:hover {
background: #FFDD00;
color: #AAAAAA;
}
</style>
</head>
...
I'm pretty sure you can't apply psudo-classes inline, but you can do this with javascript inline.
e.g.
<a href="..." onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'black'">...</a>
It would be better to follow the suggestions put forth above in an external style sheet, but for whatever reason you really need to do it, try this:
a href="" style="text-decoration:underline;color:blue;"
加载中,请稍侯......
精彩评论