113

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.

Pmpr.ir
  • 16,260
  • 23
  • 83
  • 97
raldi
  • 20,384
  • 31
  • 75
  • 86
  • 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 09 '11 at 21:52
  • See also https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles – rogerdpack Jul 06 '17 at 20:14

7 Answers7

113

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?

Matt
  • 26,019
  • 6
  • 79
  • 73
Glenn Slaven
  • 32,791
  • 25
  • 110
  • 164
  • 3
    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 '08 at 06:12
  • 1
    True, but browsers do implement some CSS3 rules, *should* is probably the wrong word in this context – Glenn Slaven Sep 25 '08 at 06: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 '08 at 15:26
  • Wouldn't style=":hover {}" be equivalent to "a { :hover {} }" in stylesheet? That obviously is a syntax error. – Kornel Nov 27 '08 at 20:09
  • 45
    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. (http://www.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. – Ilya Streltsyn Jan 26 '14 at 22:29
  • I just needed this for a fast fix, and it worked in Chrome 93.0.4577.82. I added sth like this to a link tag: `test` Even though inline style should be avoided, sometimes a fast fix if helpful. :) Thanx for the hint! – davidman77 Sep 25 '21 at 00:07
  • Oh! 5 mins to edit a comment? Final version: Just needed this for a fast fix & it worked in Chrome 93.0.4577.82. I added sth. like this to a link tag: `test` Important notice: it didn't work putting a ; after the } So this didn't work: `test` neither this: `test` Even though inline style should be avoided, sometimes a fast fix is helpful. :) Thanx 4 the hint! – davidman77 Sep 25 '21 at 00:23
31

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>
GitaarLAB
  • 14,134
  • 11
  • 55
  • 76
Aleksi Yrttiaho
  • 7,856
  • 27
  • 36
  • 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 02 '14 at 12:00
  • Thanks! That's worked for me :) – Fatihi Youssef Nov 02 '21 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: `
    some content
    `     – KevynTD Nov 04 '21 at 14:38
26

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>
SwissCodeMen
  • 3,359
  • 4
  • 15
  • 26
Roberto
  • 261
  • 3
  • 2
17

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>
Rodrick Chapman
  • 5,327
  • 1
  • 29
  • 32
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>
Josh Kernich
  • 11
  • 1
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/

michielbdejong
  • 1,069
  • 9
  • 13
-2

I don't think jQuery supports the pseudo-selectors either, but it does provide a quick way to add events to one, many, or all of your similar controls and tags on a single page.

Best of all, you can chain the event binds and do it all in one line of script if you want. Much easier than manually editing all of the HTML to turn them on or off. Then again, since you can do the same in CSS I don't know that it buys you anything (other than learning jQuery).

CMPalmer
  • 8,449
  • 5
  • 40
  • 47