123

I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:

<p style="font-size: 24px">asdf</p>

What's the syntax for embedding a rule like:

a:hover {text-decoration: underline;}

into the style attribute of an A tag? It's obviously not this...

<a href="foo" style="text-decoration: underline">bar</a>

...since that would apply all the time, as opposed to just during hover.

2
  • Theoretically, if you are trying to make the hover something dynamic, you could use javascript to inject a hover rule into a stylesheet using the window.document.styleSheets list of existing sheets.
    – GAgnew
    Nov 9, 2011 at 21:52
  • See also stackoverflow.com/questions/5293280/…
    – rogerdpack
    Jul 6, 2017 at 20:14

6 Answers 6

126

I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.

I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it

Edit: I just did a quick test with this:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?

7
  • 4
    That's a very low priority CSS 3 working draft that hasn't been updated in six years. From the spec: 'It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress." '
    – Jim
    Sep 25, 2008 at 6:12
  • 1
    True, but browsers do implement some CSS3 rules, should is probably the wrong word in this context Sep 25, 2008 at 6:17
  • Browsers typically implement CSS features that are in a further development state, e.g. opacity is from CSS Color (Last Call) and Media Queries is a Candidate Recommendation.
    – Jim
    Sep 25, 2008 at 15:26
  • Wouldn't style=":hover {}" be equivalent to "a { :hover {} }" in stylesheet? That obviously is a syntax error.
    – Kornel
    Nov 27, 2008 at 20:09
  • 47
    This answer was posted very long time ago, things have changed since that and the current version of the relevant W3C spec — CSS Style Attribute Rec. (w3.org/TR/css-style-attr/#syntax) — clearly says that style attribute can contain only the contents of a CSS declaration block. So it's now impossible to insert pseudo elements with style attribute. Jan 26, 2014 at 22:29
36

If you are only debugging, you might use javascript to modify the css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>
3
  • 1
    Searched for a solution with JSF and this helped me to fix it. onmousemove="this.style.color='##{cc.attrs.color}';" onmouseout="this.style.color='white';"
    – kdoteu
    Jun 2, 2014 at 12:00
  • Thanks! That's worked for me :) Nov 2, 2021 at 23:50
  • Another way is to use pointer events, it's better for different devices, and we can change the whole style attribute too: <div style="color: green; background: gray" onpointerenter="this.setAttribute('style', 'color: blue; background: red')" onpointerleave="this.setAttribute('style', 'color: red; background: blue')">some content</div>
    – KevynTD
    Nov 4, 2021 at 14:38
30

A simple solution:

<a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

Or

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>
1
  • Thanks. This worked in Blogger for an image.
    – dawn
    Jul 1, 2021 at 4:53
18

If it's for debugging, just add a css class for hovering (since elements can have more than one class):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>
1
  • 2
    This is probably the closest you're going to get to the desired effect Sep 25, 2008 at 6:10
1

I put together a quick solution for anyone wanting to create hover popups without CSS using the onmouseover and onmouseout behaviors.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
0

If that <p> tag is created from JavaScript, then you do have another option: use JSS to programmatically insert stylesheets into the document head. It does support '&:hover'. https://cssinjs.org/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.