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.

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
raldi
  • 21,344
  • 33
  • 76
  • 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

6 Answers6

125

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
  • 27,170
  • 6
  • 80
  • 74
Glenn Slaven
  • 33,720
  • 26
  • 113
  • 165
  • 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 '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
  • 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. (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
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>
GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Aleksi Yrttiaho
  • 8,266
  • 29
  • 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
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>
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Roberto
  • 301
  • 3
  • 2
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>
Rodrick Chapman
  • 5,437
  • 2
  • 31
  • 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,077
  • 9
  • 14