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.

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. — providence
– providence, Commented Jul 19, 2011 at 8:50
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 — Kato
– Kato, Commented Aug 10, 2011 at 17:37
possible duplicate of Is is possible to create inline pseudo styles? — Synetech
– Synetech, Commented Nov 20, 2012 at 2:20
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. — ElBel
– ElBel, Commented Jul 26, 2013 at 23:08
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. — Nathan
– Nathan, Commented Feb 21, 2020 at 6:39

Giampaolo Ferradini · Accepted Answer · 2019-02-20 15:40:49Z

752

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.

edited Feb 20, 2019 at 15:40

Giampaolo Ferradini

5871 gold badge8 silver badges18 bronze badges

answered Jun 23, 2009 at 15:09

Jonathan Fingland

57.3k11 gold badges88 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

30 Comments

Jonathan Fingland Over a year ago

you can add css classes in javascript

Simon E. Over a year ago

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.

Jonathan Fingland Over a year ago

@Kato 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.

Kato Over a year ago

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?

Miguel Angelo Over a year ago

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!!! =)

|

Gangani Roshan · Accepted Answer · 2018-04-07 05:05:37Z

665

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').

edited Apr 7, 2018 at 5:05

Gangani Roshan

5831 gold badge8 silver badges25 bronze badges

answered Jun 23, 2009 at 15:16

Alex S

26.2k18 gold badges57 silver badges63 bronze badges

7 Comments

mxro Over a year ago

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

Solace Over a year ago

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

Manachi Over a year ago

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 :)

Jay Rizzi Over a year ago

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

theUtherSide Over a year ago

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

|

Peter Mortensen · Accepted Answer · 2022-12-12 21:19:09Z

68

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).

edited Dec 12, 2022 at 21:19

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 12, 2021 at 10:08

Simon

1,5831 gold badge16 silver badges26 bronze badges

3 Comments

Jimmy Long Over a year ago

I tried this out and it didn't work for me. Is there any documentation out there about how this is supposed to work?

Simon Over a year ago

That's just how css works - the :hover rule needs to be loaded as css somehow (e.g. in the head section) and then you override the variables in the markup (as seen above) anywhere, and for all deeper elements the css will resolve to that value. more information about the variables can be found in the MDN developer.mozilla.org/en-US/docs/Web/CSS/--*

Jimmy Long Over a year ago

I think I misunderstood how this works. Looking at it now, I see where my mistake was. Thank you!

score 66 · Accepted Answer · 2019-01-29 12:30:52Z

66

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 .

edited Jan 29, 2019 at 12:30

answered Mar 27, 2012 at 5:59

user379888

14 Comments

Amr Elgarhy Over a year ago

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

user379888 Over a year ago

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.

Amr Elgarhy Over a year ago

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

BoltClock Over a year ago

In case anyone comes across this answer, the answerer posted a question about this feature here: stackoverflow.com/questions/9884182/…

Ilya Streltsyn Over a year ago

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.

|

Community · Accepted Answer · 2020-01-16 17:36:38Z

53

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>

edited Jan 16, 2020 at 17:36

CommunityBot

11 silver badge

answered Jun 23, 2009 at 15:10

Rex M

144k34 gold badges292 silver badges315 bronze badges

2 Comments

merwok Over a year ago

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)

user379888 Over a year ago

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

Md. Rakibul Islam · Accepted Answer · 2024-10-26 07:14:18Z

43

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.

edited Oct 26, 2024 at 7:14

Md. Rakibul Islam

2,3292 gold badges9 silver badges19 bronze badges

answered Aug 10, 2015 at 9:41

lukesrw

2,0492 gold badges16 silver badges21 bronze badges

12 Comments

Hovhannes Sargsyan Over a year ago

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

red-o-alf Over a year ago

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

lukesrw Over a year ago

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.

wcndave Over a year ago

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.

shinzou Over a year ago

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

|

tkazik · Accepted Answer · 2023-01-04 06:50:14Z

35

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"

edited Jan 4, 2023 at 6:50

tkazik

1,5294 gold badges18 silver badges29 bronze badges

answered Jul 22, 2013 at 8:33

T.Todua

57.1k22 gold badges261 silver badges266 bronze badges

2 Comments

Bill Over a year ago

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

theglossy1 Over a year ago

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

Eric Hodonsky · Accepted Answer · 2019-02-08 18:43:11Z

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'
}

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

dakab · Accepted Answer · 2023-01-04 06:50:56Z

16

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;"

edited Jan 4, 2023 at 6:50

dakab

5,97510 gold badges46 silver badges71 bronze badges

answered May 1, 2013 at 12:58

citronic

10.2k15 gold badges54 silver badges74 bronze badges

1 Comment

Vladislav Guleaev Over a year ago

that should be the best answer

SystemParadox · Accepted Answer · 2017-09-18 12:56:32Z

15

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>

edited Sep 18, 2017 at 12:56

SystemParadox

8,7126 gold badges52 silver badges61 bronze badges

answered Jun 23, 2009 at 15:11

brettkelly

28.3k8 gold badges58 silver badges73 bronze badges

1 Comment

Ms2ger Over a year ago

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

user9277191 · Accepted Answer · 2018-11-15 19:52:51Z

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>

answered Nov 15, 2018 at 19:52

user9277191

Comments

Joel · Accepted Answer · 2012-01-11 14:54:24Z

8

<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.

edited Jan 11, 2012 at 14:54

answered Jun 23, 2009 at 15:10

Joel

19.4k3 gold badges67 silver badges84 bronze badges

1 Comment

Chris Over a year ago

@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).

Andi · Accepted Answer · 2023-01-03 17:29:13Z

8

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>

edited Jan 3, 2023 at 17:29

Andi

3,0025 gold badges18 silver badges37 bronze badges

answered Jul 1, 2022 at 13:37

Sir XtC

2212 silver badges10 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2013-10-25 16:14:53Z

6

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.

edited Oct 25, 2013 at 16:14

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 23, 2009 at 15:13

Vineel Shah

1,0588 silver badges14 bronze badges

1 Comment

Amr Elgarhy Over a year ago

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

CrazyMatt · Accepted Answer · 2016-08-08 07:14:57Z

5

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.

edited Aug 8, 2016 at 7:14

CrazyMatt

5211 gold badge4 silver badges12 bronze badges

answered Jun 23, 2009 at 15:11

m_vitaly

12k5 gold badges49 silver badges63 bronze badges

Comments

CrazyMatt · Accepted Answer · 2016-08-08 07:23:59Z

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!

Peter Mortensen · Accepted Answer · 2022-12-10 03:06:47Z

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.

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.

mrid · Accepted Answer · 2017-10-01 06:14:48Z

2

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.

edited Oct 1, 2017 at 6:14

mrid

5,7886 gold badges34 silver badges78 bronze badges

answered Mar 26, 2010 at 10:22

Jaysn

632 bronze badges

Comments

webhound · Accepted Answer · 2018-12-06 22:15:52Z

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

Alexis Duran · Accepted Answer · 2021-01-31 11:42:58Z

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)

gre_gor · Accepted Answer · 2024-08-31 15:48:53Z

There is no builtin way to do this, but you can make JavaScript convert certain style attributes into CSS rules.

const init_inline_style_pseudo = options => {
    const {
        root = document,
        dynamic = true,
        class_id = true,
    } = options ?? {};

    const unique_name_key = Symbol();
    let stylesheet = document.createElement("style");
    document.head.append(stylesheet);
    stylesheet = stylesheet.sheet;

    const get_elements = function*(...nodes) {
        for (const node of nodes) {
            for (const attr of node.attributes ?? []) {
                if (attr.name.match(/^style./)) {
                    yield node;
                }
            }
            if (node.children) {
                yield* get_elements(...node.children);
            }
        }
    }

    const process_el = (el, attr_name) => {
        let attrs;
        if (attr_name) {
            attrs = [[attr_name, attr_name.match(/^style(.+)$/)?.[1]]];
        }
        else {
            attrs = [...el.attributes].map(attr => [attr.name, attr.name.match(/^style(.+)$/)?.[1]]);
        }
        attrs = attrs.filter(([attr_name, pseudo]) => pseudo);
        if (!attrs.length) {
            return;
        }

        let unique_name = el[unique_name_key];
        if (!unique_name) {
            unique_name = el[unique_name_key] = `el-${crypto.randomUUID()}`;
            if (class_id) {
                el.classList.add(unique_name);
            }
            else {
                el.setAttribute(unique_name, "");
            }
        }

        for (const [attr_name, pseudo] of attrs) {
            const selector = class_id ? `.${unique_name}${pseudo}` : `[${unique_name}]${pseudo}`;

            const existing_rule_index = [...stylesheet.cssRules].findIndex(r => r.selectorText == selector);
            if (existing_rule_index >= 0) {
                stylesheet.deleteRule(existing_rule_index);
            }
            
            const rules = el.getAttribute(attr_name);
            if (!rules) {
                continue;
            }

            const rule_index = stylesheet.insertRule(`${selector} { ${rules} }`);
            const rule = stylesheet.cssRules[rule_index];
            for (const [prop_name, prop_value] of rule.styleMap.entries()) {
                rule.style.setProperty(prop_name, prop_value.toString(), "important");
            }
        }
    };

    get_elements(root).forEach(el => process_el(el));

    if (dynamic) {
        new MutationObserver(mutations => {
            for (const mutation of mutations) {
                switch (mutation.type) {
                    case "childList":
                        get_elements(...mutation.addedNodes).forEach(el => process_el(el));
                        break;
                    case "attributes":
                        if (mutation.attributeName.match(/^style./)) {
                            process_el(mutation.target, mutation.attributeName);
                        }
                        break;
                }
            }
        }).observe(root, {
            subtree: true,
            childList: true,
            attributes: true,
        });
    }
};
init_inline_style_pseudo();

// dynamic HTML example
document.getElementById("add-link").addEventListener("click", function(e) {
    const color = document.getElementById("link-color").value;
    const bg_color = "#"+((1<<24) - parseInt(color.slice(1), 16)).toString(16).padStart(6, "0");
    const li = document.createElement("li");
    li.setAttribute("style:hover", `background: ${bg_color}`);
    const a = document.createElement("a");
    a.href = color;
    a.setAttribute("style:hover", `color: ${color}`);
    a.textContent = `Link ${color}`;
    li.append(a)
    document.getElementById("links").append(li);

    document.getElementById("link-color").value = "#" + Math.floor((Math.random() * (1 << 24))).toString(16).padStart(6, "0");
});
document.getElementById("link-color").value = "#00FF00";

<main>
  <ol id="links">
    <li>
      <a
        href="#one"
        style="color: green"
        style:hover="color: red"
        style:active="font-weight: bold"
      >Link one</a>
    </li>
    <li>
      <a
        href="#two"
        style:hover="color: cyan"
        style:active="font-weight: bold"
      >Link two</a>
    </li>
  </ol>
  <input
    id="link-color"
    type="color"
    style:focus="outline: 4px solid black"
  >
  <button id="add-link">Add</button>

  <div
    id="one"
    style:target="text-transform: uppercase; font-weight: bold;"
    style:target::before="content: '<'"
    style:target::after="content: '>'"
  >one</div>
  <div
    id="two"
    style:target="text-transform: uppercase; font-weight: bold;"
    style:target::before="content: '>'"
    style:target::after="content: '<'"
  >two</div>

  <label>
    <input
      type="checkbox"
      style:checked+*="display: inline"
      style:checked+*+*="display: none"
      style~*="color: magenta"
    >
    <span style="display: none">Checked</span>
    <span style="display: inline">Unhecked</span>
  </label>
</main>

This works even with dynamic HTML and you can even use other selectors as long they make a valid attribute name.

This is not useful for HTML in emails as this requires JavaScript, but could be useful for prototyping. I wouldn't use this in production either.

Yes it's a bit too much outside of the scope of this question.

Ash90 · Accepted Answer · 2021-10-24 05:25:43Z

-1

You can just use an inline stylesheet statement like this:

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

edited Oct 24, 2021 at 5:25

answered Oct 23, 2021 at 21:18

Ash90

771 silver badge7 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2022-12-10 02:51:39Z

-3

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.

edited Dec 10, 2022 at 2:51

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 4, 2014 at 19:47

bug

3421 silver badge10 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2013-10-25 16:19:21Z

-4

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 */

edited Oct 25, 2013 at 16:19

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jun 19, 2012 at 12:18

user1466310

25

1 Comment

Dmitri Zaitsev Over a year ago

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

iorgu · Accepted Answer · 2024-10-26 08:19:16Z

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 {
  width: 100px;
  height: 100px;
}

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
  cursor: pointer;
}

.withoutHover {
  display: none;
}

.container:hover .withoutHover {
  display: block;
}

.container:hover .withHover {
  display: none;
}

<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://picsum.photos/300/200')"></div>
  <div class="withoutHover" style="background-image: url('https://picsum.photos/200/200')"></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).

Collectives™ on Stack Overflow

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

25 Answers 25

30 Comments

7 Comments

3 Comments

14 Comments

2 Comments

12 Comments

Using JavaScript:

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Approach CSS only

CSS

Markup

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

30 Comments

7 Comments

3 Comments

14 Comments

2 Comments

12 Comments

Using JavaScript:

2 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Approach CSS only

CSS

Markup

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Related