How to use a:hover in inline CSS inside the HTML style attribute?
By adding links to external stylesheets ,
[pastacode lang=”javascript” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20var%20link%20%3D%20document.createElement(%22link%22)%3B%0A%20%20link.setAttribute(%22rel%22%2C%22stylesheet%22)%3B%0A%20%20link.setAttribute(%22href%22%2C%22http%3A%2F%2Fwikitechy.com%2Fyourstylesheet.css%22)%3B%0A%20%20var%20head%20%3D%20document.getElementsByTagName(%22head%22)%5B0%5D%3B%0A%20%20head.appendChild(link)%3B%0A%3C%2Fscript%3E%0A” message=”jQuery Code” highlight=”” provider=”manual”/]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:
[pastacode lang=”markup” manual=”%3Ca%0A%20%20%20href%3D%22abc.html%22%0A%20%20%20onMouseOver%3D%22this.style.color%3D’%230F0’%22%0A%20%20%20onMouseOut%3D%22this.style.color%3D’%2300F’%22%0A%3EText%3C%2Fa%3E%0A%0A” message=”Html Code” highlight=”” provider=”manual”/]Also, we may have to switch it with document.getElementById(‘idForLink’).
[pastacode lang=”css” manual=”.hover-item%20%7B%0A%09background-color%3A%20%23FFF%3B%0A%7D%0A%0A.hover-item%3Ahover%20%7B%0A%09background-color%3A%20inherit%3B%0A%7D%0A%3Ca%20style%3D%22background-color%3A%20yellow%22%3E%0A%09%3Cdiv%20class%3D%22hover-item%22%3E%0A%09%09Content%0A%09%3C%2Fdiv%3E%0A%3C%2Fa%0A” message=”Css Code” highlight=”” provider=”manual”/] [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:
[pastacode lang=”javascript” manual=”document.head.insertAdjacentHTML(‘beforeend’%2C%20’%3Cstyle%3E%23mydiv%3Ahover%7Bcolor%3Ared%3B%7D%3C%2Fstyle%3E’)%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]or a bit harder method:
[pastacode lang=”javascript” manual=”document.getElementById(%22mydiv%22).onmouseover%3D%20function(e)%7Bthis.className%20%2B%3D%20’%20my-special-class’%3B%20%7D%3B%0Adocument.getElementById(%22mydiv%22).onmouseleave%3D%20function(e)%7Bthis.className%20%3D%20this.className.replace(‘my-special-class’%2C”)%3B%20%7D%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]Multi-word styles in Javascript:
[pastacode lang=”javascript” manual=”element.style.fontSize%3D%2212px%22%0A” message=”jQuery Code” highlight=”” provider=”manual”/]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:
[pastacode lang=”markup” manual=”%3Chtml%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%23uniqueid%3Ahover%20%7Bdo%3Asomething%3B%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3Ca%20id%3D%22uniqueid%22%3Ehello%20wikitechy%3C%2Fa%3E%0A%20%3C%2Fhtml%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]Just define a style block directly to the link you want to style:
[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20myLinkClass%3Ahover%20%7Btext-decoration%3Aunderline%3B%7D%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22%2Fwiki%22%20class%3D%22myLinkClass%22%3Ewiki!%3C%2Fa%3E” message=”Html Code” highlight=”” provider=”manual”/] [ad type=”banner”] [pastacode lang=”markup” manual=”%3Cstyle%3Ea%3Ahover%20%7B%20%7D%3C%2Fstyle%3E%0A%3Ca%20href%3D%22%2F%22%3EGo%20Home%3C%2Fa%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]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:
[pastacode lang=”javascript” manual=”style%3D%22cursor%3A%20pointer%3B%22%0A” message=”jQuery Code” highlight=”” provider=”manual”/]we can do id by adding a class but never inline.
[pastacode lang=”markup” manual=”%3Cstyle%3E.hover_pointer%7Bcursor%3Apointer%3B%7D%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%22hover_pointer%22%20style%3D%22font%3Abold%2012pt%20Calibri%3B%22%3EHello%20Wikitechy%20World%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]we can re-use the class everywhere.
[ad type=”banner”]