CSS HTML

[ Solved -9 Answers ] How to write a:hover in inline CSS

By Wikitechy Editor

March 23, 2017 2 Min Read

77 0

PROBLEM :

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

SOLUTION 1:

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.

SOLUTION 2:

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

SOLUTION 3:

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.

SOLUTION 4:

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"

SOLUTION 5:

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>

SOLUTION 6:

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”]

SOLUTION 7:

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.

SOLUTION 8:

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

SOLUTION 9:

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”]

Tags:

a href style hover a:hover etc in an email newsletter CSS :hover Selector css hover image CSS Inline Styles. Hover?hover html text How can change color in hover with inline css?how can i define a:hover using inline CSS?how to put hover inline.html - How to write :hover using inline style?html hover image Inline a:hover tag?inline hover style email inline hover style in html inline style hover react Inline styles for a:link onmouseover background color

Wikitechy Editor

Other Articles

[ Solved – 11 Answers ] HTML – Remove border from IFrame

Offsetting an html anchor to adjust for fixed header

No Comment! Be the first one.

Leave a Reply

Popular Posts

Download Huawei P9 Lite Android Nougat Update [B336]

How to Install TWRP Recovery and Root Mi5s & Mi5s Plus

How to Downgrade Honor 5c from Nougat to Marshmallow

Download ZTE Axon 7 Android 7.1 Nougat Update (MiFavor 4.2)(B13)

Categories

Related Posts

How do I start learning HTML for Beginners?

C Programming – Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm)

How to Modify the URL without reloading the page

Type and hit Enter to search

Type and hit Enter to search

[ Solved -9 Answers ] How to write a:hover in inline CSS

Tags:

Share Article

Other Articles

No Comment! Be the first one.

Leave a Reply

Popular Posts

Categories

Related Posts