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

By adding links to external stylesheets ,

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

Caution: the above code assumes there is a head section.

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

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

Also, we may have to switch it with document.getElementById(‘idForLink’).

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

.hover-item:hover {
	background-color: inherit;
}
<a style="background-color: yellow">
	<div class="hover-item">
		Content
	</div>
</a
[ad type=”banner”]

In this case, the inline code: “background-color: yellow;” is the switch color on hover, so we got to put the color we need into there and thereby this solution works.

Adding inline style using Javascript:

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

or a bit harder method:

jQuery Code 
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',''); };

Multi-word styles in Javascript:

jQuery Code 
element.style.fontSize="12px"

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, a style set can go most anywhere in the code:

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

Just define a style block directly to the link you want to style:

Html Code 
<style type="text/css">
    myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/wiki" class="myLinkClass">wiki!</a>
[ad type=”banner”]

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

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

jQuery Code 
style="cursor: pointer;"

we can do id by adding a class but never inline.

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

we can re-use the class everywhere.

[ad type=”banner”]

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , ,