How can I write 'a:hover' in inline CSS?

Question

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor.

How can I use a:hover in inline CSS inside the HTML style attribute?

E.g., you can't reliably use CSS classes in HTML emails.

Spithead

Embedding html into blogging applications also often requires exclusive use of inline styles. Especially if you are embedding the html through a third party client and have no access to the user's themes. – Narcho

There is a proposed CSS standard for this; no idea what sort of browser support it might have (hint: they could be using the custom tags like -moz, etc): w3.org/TR/2002/WD-css-style-attr-20020515 – Indistinguishable

possible duplicate of Is is possible to create inline pseudo styles? – Bridges

Oh come on. Sometimes you're just building a landing page prototype and you don't want to have to go fork the stylesheets or create a new template branch or whatever just to test out whether the green button works better. Sheesh. – Ambros

I see none of the answers respond to HTML email use case. In fact, for that case, you can indeed use standard (embedded) CSS. Not every email client may accept it, but many do. – Norean

Whatever solution you pick, don’t forget to also provide a :focus style, which is very important for keyboard and screen reader users. – Cellarer

CSS Hooks may be of interest. – Conchology

@NickSaunders interesting... still need to review it but 1st Q came to my mind, will I need to include another customer js or CSS to make it work? – Spithead

@AmrElgarhy the system generates a small amount of CSS, statically, based on your configured hooks. Unfortunately, there's no way around this due to the limitations of the style attribute, but the added complexity of this is trivial in comparison to other solutions like CSS-in-JS and even Tailwind. From there, CSS Hooks exploits a tiny amount of "programmability" found in CSS Variables to toggle your declarations on or off depending on the state of the associated hook. A hook, by the way, is something like "hover", "focus", "active", "darkMode", "mobile", etc. -- all fully configurable. – Conchology

style="cursor:pointer;" – Mario

Answer 1

Short answer: you can't.

Long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style.

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

Response to the OP's comments:

See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.

Also, don't forget, you can add links to external stylesheets if that's an option. For example,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Caution: the above assumes there is a head section.

Wideranging

the problem that i can't do so, i am sending a javascript file in http response and js creates the html code and the css inline, and can't send another file. i know 100% that its better to use style sheet files – Spithead

you can add css classes in javascript – Wideranging

@Jonathan Fingland how? can you remind me with s short sample? – Spithead

see quirksmode.org/dom/changess.html for details on adding css classes. (read all the way to the bottom) – Wideranging

also see hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript for a more comprehensive solution (could be optimized though) – Wideranging

alternatively, you could write the onmouseover and onmouseout attributes to change style like hover. – Oversold

There are other circumstances where inline CSS is the only option - such as HTML emails (eg. Gmail ignores CSS unless it is inline). Unfortunately with Javascript stripped in most email clients as well I have not yet found a way of adding :hover effects. – Pesticide

@Simon, perhaps your situation requires a new/different question. The OP question was not related to emails which have a very different set of restrictions. – Wideranging

@Indistinguishable while that is a great link, and I really wish it worked, sadly it does not. Just to confirm, I tested using the syntax style="{color:green;} :hover { color: red; }" and firefox managed to color the link green, but ignored the hover. Chrome ignored both. Continued testing would be pretty pointless. – Wideranging

That's right, No browser seem to have started supporting that syntax yet. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress." :-) I would love to see that implemented though, as I am also working with news letters now. – Rountree

I didn't state it as a working solution. I stated is wasn't "entirely" correct to say there is no inline equivalent and that pseudo selectors have no meaning outside stylesheets. How is that inappropriate? – Indistinguishable

@jonathan-fingland ROFL when I read the short and long answer and simultaneously shamed me into doing it right in the first place. I didn't even have to read beyond "you shouldn't". Well played, Well played. :-) – Fitzsimmons

While it is generally (99.999% of the time) a good idea not to use inline styles, there are some scenarios where this is important. I came to this question because users will be picking their own colors from a color picker, which will paint the background of table cells that color, but only when hovering over the parent row. Since we're using an MVC framework, we'd like to generate this directly in the HTML. Would it really be easier/better to use classes for this? – Cinchonine

I agree with Simon, inline workarounds are always needed for corner cases and it's not necessarily good to discourage researching them. – Aerobic

Why long answer is You shouldn't... you... you shouldn't generalize. I was trying to send e-mail messages with html, but guess what... gmail removes all style tags, all external style references, and all scripts. So... is there any way to style hover color of links inside emails sent to gmail? Hope it does... hope is the last to die!!! =) – Highpriced

@ajkochanowicz sorry for the late reply here,but you'd be wanting to add the style classes via javascript as noted in the first Edit section. – Wideranging

@MiguelAngelo Sorry to hear about your troubles, but HTML emails are notoriously finicky. Stuff that looks fine in Thunderbird will be awful in Yahoo's web email client. Gmail will be fine, but Outlook will barf. Email is probably the biggest reason for a "you shouldn't". Your best bet is to treat everything like HTML 3, and not get too fancy with special effects. – Wideranging

There's always a "head section", even if there's no <head>. – Gunpoint

@Simon I think the best solution would be to have <style> tags for hover events (and don't even go near JS) If the client doesn't support <style> then they simply don't get the effect. Pretty graceful if you ask me. – Corporative

No, no, no. I refuse to believe that you shouldn't. OK, say you have some kind of ads, and want to let the publisher or advertiser configure the hover state of the ad in a JSON file. You clearly can't use CSS classes there, so the only 2 options are: create a <style> element where you can use :hover or do the whole thing with JS (onmouseover). There you have a use case where you should do this. – Deathlike

@Kato: At the time you posted that comment, that draft was almost a decade old, and was already superseded by a newer revision where that information has clearly been removed. While the working group may have toyed with the idea of introducing selectors into inline styles in the distant past, that idea clearly fell out of favor. On top of that, not only is it inappropriate to cite unstable drafts as canon, it's even more so to cite an old draft as canon where newer revisions already exist. This seems to be a common mistake people make. – Inquire

@Kato: But in your defense, the W3C TRs don't make it very clear that a certain revision is no longer the latest one beyond the revision date at the very top of the page. So just something for you to keep in mind in the future - you can reach the latest revision of a W3C document by going to the top and clicking where it says "Latest version". And never call something a "standard" unless there is evidence that it has in fact been standardized. – Inquire

Long answer: you shouldn't Don't forget that some of us are hackers, and an inline style tag might be our only way to exploit a system (; – Immoderation

You should always add a selector in a style sheet for every one-off style? I agree that you should minimize even using one-off styles in the first place, but I'm not sure why you should take the style of a single exception to styling rules and move it where you have to go hunt it down... even if you just have to look up to the top of the file. I know some very good programmers who disagree with that. – Residue

Also, I'd argue that a good explanation renders statements about what you should and shouldn't do unnecessary, whereas statements about what you should and shouldn't do don't explain much of anything. – Residue

RE: Long answer: you shouldn't: What about if I need to generate a lot of different tags with different hover colors and all this data is pulled from DB, generating whole stylesheet just to render one page is not a good solution. And what if this content after being generated have to be stored in DB somewhere in post content, so it will need always <style></style> block for each of individual other block. Looks very bad I think. – Hilten

"There are other circumstances where inline CSS is the only option - such as HTML emails...." Thank God you can't do this stuff in emails. All we need is all-singing, all-dancing spam – Gallimaufry

When styling emails, one can't avoid it. – Crease

"you shouldn't" is a nice thought but sometimes it is the only option.The question specifically requested a solution for this problem, not an opinion. I run into this often enough where selected styles (such as font color) need to be set dynamically by the user and an external stylesheet is not feasible. – Rumple

One example of where "you shouldn't" just does not work is emails. You need to send an email with a particular style and absolutely every email mailbox breaks CSS classes to some extent. – Befog

Answer 2

You can get the same effect by changing your styles with JavaScript in the onMouseOver and onMouseOut parameters, although it's extremely inefficient if you need to change more than one element:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Also, I can't remember for sure if this works in this context. You may have to switch it with document.getElementById('idForLink').

Mound

that's smart! Works for a background color hover effect as well <div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ... – Categorize

Firstly, thank you, and then is there a smart trick for writing li.selected {...} in an inline style as well? – Rickierickman

Have to laugh at this being seen as 'clever' :) It's hard to imagine that some people weren't around when this was the prominent/only way you could achieve this effect. Or worse still, to have an 'image' and have to swap out the image, just to give the 'hover' effect. Makes me feel old! But suffice to say, it does answer the OP's question :) – Saragossa

and you can remove a hover background color from being applied using onMouseOver="this.style.backgroundColor='transparent'", same for onmouseout – Oscitancy

I needed to do this for an email and it worked. Thank you! This actually solves the question, unlike the accepted answer. – Haydon

This is the actual answer to the question asked. The accepted answer is best practice. – Juanjuana

I live this solution for the eventual situation. – Byproduct

Answer 3

You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't .

Brycebryn

all other answers said that it is not possible, but yours show that it is possible, your answer is different, I am testing it. – Spithead

Actually I needed the same thing as you do. I tested it but it did not worked for me. But I still think it should work as its by w3c. – Brycebryn

Sorry, I just checked the date of the article. Its 10 years old. So there is no guarantee that it should work. If it does, please do tell me too. – Brycebryn

I tested this: <a href="http://www.w3.org/" style="{color: #900} :link {background: #ff0} :visited {background: #fff} :hover {outline: thin red solid} :active {background: #00f}">...</a> But it didn't work – Spithead

check this https://mcmap.net/q/46400/-css-pseudo-classes-with-inline-styles what I understood that any pseudo code is not valid inside attributes – Spithead

Thanks for adding that to my knowledge. – Brycebryn

Tested in Firefox 12 and works. Doesn't work in Chromium 18, but doesn't harm neither. – Orbital

But: Does not work within GMail-Signatures, which was one of the initial reasons to do this. – Orbital

@Lena Schimmel: I'm pretty sure that's not supposed to work in any browser, period. If it worked in Firefox 12, it was probably a bug, because it doesn't work in Firefox 13. – Inquire

In case anyone comes across this answer, the answerer posted a question about this feature here: #9884682 – Inquire

More accurate to say, you could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't. – Carnation

Very interesting draft, why it's not effective is beyond me. – Justinajustine

Works for me in Chrome Version 35.0.1916.114 – Estuarine

"You could do it at some point in the past" — No, you couldn't. There was a draft specification but nothing ever implemented it. – Brasher

Answer 4

You can't do exactly what you're describing, since a:hover is part of the selector, not the CSS rules. A stylesheet has two components:

selector {rules}

Inline styles only have rules; the selector is implicit to be the current element.

The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.

However, you can get close, because a style set can technically go almost anywhere:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

Geist

Actually you can’t: “HTML permits any number of STYLE elements in the HEAD section of a document.” (w3.org/TR/html4/present/styles.html#edef-STYLE) – Cyclone

Works on my machine. Thanks! – Mossman

@ÉricAraujo: Then wrap this all content under a <html> </html> tag – Brycebryn

Answer 5

While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:

:hover {
  color: var(--hover-color);
}

<a style="--hover-color: green">
    Library
</a>

Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).

Pignus

Answer 6

If you actually require inline code, this is possible to do. I needed it for some hover buttons, and the method is this:

.hover-item {
    background-color: #FFF;
}

.hover-item:hover {
    background-color: inherit;
}

<a style="background-color: red;">
    <div class="hover-item">
        Content
    </div>
</a

In this case, the inline code: "background-color: red;" is the switch colour on hover. Use the colour you need and then this solution works. I realise this may not be the perfect solution in terms of compatibility, however this works if it is absolutely needed.

Nicotinism

Thank you. That's a great answer, I think this answer must be as solution. – Grownup

Thanks sarhov, hopefully people see this if they need it. – Nicotinism

No, OP said they wanted it in inline CSS inside the HTML style attribute. – Illogic

I know, jj_- however this method allows you to put only a few lines into the CSS and use it over and over in many places, many people (including myself) have found this to be a helpful alternative. – Nicotinism

this should be the actual answer, with a slight modification: don't set any of the colours in the style, just the rule to inherit from parent when hovered, and then set the two colours inline. – Parrisch

This still will not work for Gmail as the non-inline styles will be stripped out. – Beltz

This answer helped me with my own solution to using dynamic hover colors. Very clever, thanks. – Chromogenic

I think this is a very elegant solution - and it has just helped me out - sometimes writing styles inline needs to be done. – Halothane

This is just the "normal" way to do it, which everyone was saying is the right way. However it's not an inline way, which was the OP original request. – Feeler

The question asked about inline style for a reason, you didn't use inline style. – Macey

I don't see why people say this is the elegant solution at all. This feels like a solution to something else (reusability of the .hover-items perhaps??). If you're still writing stylesheet :hover, why not just put it on the a and be done with it? Someone please help me understand - anyone? – Calash

@Calash This is useful if you've got a dynamic background-color property (for instance, if the colours are coming from a database), or if the aim is to allow more flexibility in HTML without updating CSS. You're allowing the HTML to define a colour, while leaving the transition to CSS. – Nicotinism

Answer 7

Using JavaScript:

a) Adding inline style

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) or a bit harder method - adding "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

---

Note: multi-word styles (i.e.font-size) in JavaScript are written together:

element.style.fontSize="12px"

Vauban

Since this answer has been edited down, it now appears to be completely irrelevant to the original question... – Lantana

Wow, that's thinking outside the box... I love it! – Vocalize

Answer 8

This is the best code example:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Moderator Suggestion: Keep your separation of concerns.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

Tokay

This! Thanks - only thing that worked for me. Simple solution to the question. – Treehopper

Answer 9

Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).

For now, your best bet is probably to just define a style block directly above the link you want to style:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

Carpeting

That idea will fortunately be dropped. (See lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , under "Abandoned Working Drafts".) – Korn

Answer 10

As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:

style="cursor: pointer;"

Mediation

that should be the best answer – Superior

Answer 11

You can do this. But not in inline styles. You can use onmouseover and onmouseout events:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Nole

Answer 12

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.

Clasping

@Derek in case still of interest / for anyone else reading: "~/" (tilde forward slash) is a server-side reference to the application root in asp.net web applications. (The application root may be a sub-folder of course). It's use here would not have been correct, hence the reason the answer has been edited since you asked the question (I suspect). – Rhinoscopy

Answer 13

It's not exactly inline CSS, but it is inline.

<a href="abc.html" onMouseOver="this.style.color='#0F0'" 
onMouseOut="this.style.color='#00F'">Text</a>

Splendid

Answer 14

There is no way to do this. Your options are to use a JavaScript or a CSS block.

Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.

Excelsior

Answer 15

According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.

Fender

While this is a work around but it seams a very good answer for me and the best answer if really its not possible to write inline hover – Spithead

Answer 16

I just figured out a different solution.

My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.

Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!

Filum

Answer 17

You can write code in various type.

First I can write this

HTML

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

You can try another way:

HTML

<a href="https://www.google.com/" class="one">Hello siraj</a>

CSS

.one {
    text-decoration: none;
}

.one:hover {
    color: blue;
}

.one:active {
    color: red;
}

You can also try hover in jQuery:

JavaScript

$(document).ready(function() {
  $("p").hover(function() {
    $(this).css("background-color", "yellow");
    }, function() {
      $(this).css("background-color", "pink");
  });
});

HTML

<p>Hover the mouse pointer over this paragraph.</p>

In this code you have three functions in jQuery. First you ready a function which is the basic of a function of jQuery. Then secondly, you have a hover function in this function. When you hover a pointer to the text, the color will be changed and then next when you release the pointer to the text, it will be the different color, and this is the third function.

Sapphirine

Please avoid posting duplicate answers – Deonnadeonne

None of these approaches solve the problem expressed in the question. You can't use JS in an HTML formatted email at all, and the other approach you suggest uses classes which is explicitly ruled out. – Brasher

Answer 18

I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.

And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;) Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.

Lakieshalakin

Answer 19

So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.

I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Then I used the style in the template:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

You may not need the !important

Discomfortable

Answer 20

While the "you shouldn't" context may apply there may be cases were you still want to achieve this. My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity.

Approach CSS only

CSS

/* Set your parent color for the inherit property */
.sidebar {
  color: green;
}

/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
  color: inherit
}

.list-item a:hover {
  color: inherit
}

/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
  color: inherit !important;
}

Then your markup will be somewhat like:

Markup

<nav class="sidebar">
  <ul>
    <li class="list-item">
      <a
        href="/foo"
        class="dynamic-hover-color"
        style="color: #{{category.color}};"
      >
        Category
      </a>
    </li>
  </ul>
</nav>

I'm doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style (even if it is writing manually the color on hover you want)

Espino

Answer 21

You can just use an inline stylesheet statement like this:

<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>

Oxcart

Answer 22

You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:

a:hover {color:#FF00FF;}   /* Mouse-over link */

Melt

Surely you don't need external sheets, just use the style tag. – Labe

Answer 23

You can do id by adding a class, but never inline.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

It is two lines, but you can reuse the class everywhere.

Lanti

Answer 24

My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover). I produced the following solution for this:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).

Highpitched