Welcome to the Hindi Tutor QA. Create an account or login for asking a question and writing an answer.
☰

How to write a:hover in inline CSS?

Pooja in Web Designing
edited

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.

4 Answers

+1 vote
Nadira
selected
 
Best answer

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>
0 votes
Nadira
edited

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.

0 votes
Nadira
edited

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

0 votes
Nadira
edited

I'm extremely late contributing to this, however I was sad to see no one suggested this, if you actually require inline code, this is possible to do. I needed it for some hover buttons, 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, put the colour you need into there 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.

Related questions

About Us Contact Us Privacy Policy
Copyright © 2021 Hindi Tutor. All Rights Reserved.
...