🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

How to write a:hover in inline CSS?

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.
css html
by

4 Answers

RoliMishra
:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent. So can specify the a:hover property either by using internal CSS or external CSS.
sandhya6gczb
The : hover is the part of the selector, not CSS 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>
ninja01
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',''); };
kshitijrana14 
<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.

Login / Signup to Answer the Question.

LoginSignup