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.
Short answer: you can't.
Long answer: you shouldn't.
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.
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').
You could do it at some point in the past. But now (according to the latest revision of the same standard, which is Candidate Recommendation) you can't
.
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>
If you actually require inline code, this is possible to do. I needed it for some hover buttons, and 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. Use the colour you need 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.
While it appears to be impossible to define a hover-rule inline, you can define the value of styles inline using a CSS variable:
:hover {
color: var(--hover-color);
}
<a style="--hover-color: green">
Library
</a>
Consider using an attribute or a class in addition to the selector (e.g., [hover-color]:hover) to allow coexistence with other low specificity hover color changing rules (from, e.g., a CSS reset or some elements using the default style).
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',''); };
Note: multi-word styles (i.e.font-size) in JavaScript are written together:
element.style.fontSize="12px"
This is the best code example:
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
onmouseover="this.style.color='#0F0'"
onmouseout="this.style.color='#00F'">
Library
</a>
Moderator Suggestion: Keep your separation of concerns.
HTML
<a
style="color:blue;text-decoration: underline;background: white;"
href="http://aashwin.com/index.php/education/library/"
class="lib-link">
Library
</a>
JS
const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
this.style.color='#0F0'
}
libLink.onmouseout = function () {
this.style.color='#00F'
}
Inline pseudoclass declarations aren't supported in the current iteration of CSS (though, from what I understand, it may come in a future version).
For now, your best bet is probably to just define a style block directly above the link you want to style:
<style type="text/css">
.myLinkClass:hover {text-decoration:underline;}
</style>
Foo!
As pointed out, you cannot set arbitrary inline styles for hover, but you can change the style of the hover cursor in CSS using the following in the appropriate tag:
style="cursor: pointer;"
<style>a:hover { }</style>
Go Home
Hover is a pseudo class, and thus cannot be applied with a style attribute. It is part of the selector.
You can do this. But not in inline styles. You can use onmouseover and onmouseout events:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Hover on me!
</div>
According to your comments, you're sending a JavaScript file anyway. Do the rollover in JavaScript. jQuery's $.hover() method makes it easy, as does every other JavaScript wrapper. It's not too hard in straight JavaScript either.
There is no way to do this. Your options are to use a JavaScript or a CSS block.
Maybe there is some JavaScript library that will convert a proprietary style attribute to a style block. But then the code will not be standard-compliant.
You can write code in various type.
First I can write this
HTML
<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>
CSS
.one {
text-decoration: none;
}
You can try another way:
HTML
Hello siraj
CSS
.one {
text-decoration: none;
}
.one:hover {
color: blue;
}
.one:active {
color: red;
}
You can also try hover in jQuery:
JavaScript
$(document).ready(function() {
$("p").hover(function() {
$(this).css("background-color", "yellow");
}, function() {
$(this).css("background-color", "pink");
});
});
HTML
<p>Hover the mouse pointer over this paragraph.</p>
In this code you have three functions in jQuery. First you ready a function which is the basic of a function of jQuery. Then secondly, you have a hover function in this function. When you hover a pointer to the text, the color will be changed and then next when you release the pointer to the text, it will be the different color, and this is the third function.
I just figured out a different solution.
My issue: I have an <a> tag around some slides/main content viewer as well as <a> tags in the footer. I want them to go to the same place in IE, so the whole paragraph would be underlined onHover, even though they're not links: the slide as a whole is a link. IE doesn't know the difference. I also have some actual links in my footer that do need the underline and color change onHover. I thought I would have to put styles inline with the footer tags to make the color change, but advice from above suggests that this is impossible.
Solution: I gave the footer links two different classes, and my problem was solved. I was able to have the onHover color change in one class, have the slides onHover have no color change/underline, and still able to have the external HREFS in the footer and the slides at the same time!
It's not exactly inline CSS, but it is inline.
<a href="abc.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#00F'">Text</a>
I agree with shadow. You could use the onmouseover and onmouseout event to change the CSS via JavaScript.
And don't say people need to have JavaScript activated. It's only a style issue, so it doesn't matter if there are some visitors without JavaScript ;)
Although most of Web 2.0 works with JavaScript. See Facebook for example (lots of JavaScript) or Myspace.
So this isn't quite what the user was looking for, but I found this question searching for an answer and came up with something sort of related. I had a bunch of repeating elements that needed a new color/hover for a tab within them. I use handlebars, which is key to my solution, but other templateing languages may also work.
I defined some colors and passed them into the handlebars template for each element. At the top of the template I defined a style tag, and put in my custom class and hover color.
<style type="text/css">
.{{chart.type}}-tab-hover:hover {
background-color: {{chart.chartPrimaryHighlight}} !important;
}
</style>
Then I used the style in the template:
<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
Payouts
</span>
You may not need the !important
While the "you shouldn't" context may apply there may be cases were you still want to achieve this. My use case was to dynamic set a hover color depending on some data value to achieve that with only CSS you can benefit from specificity.
Approach CSS only
CSS
/* Set your parent color for the inherit property */
.sidebar {
color: green;
}
/* Make sure your target element "inherit" parent color on :hover and default */
.list-item a {
color: inherit
}
.list-item a:hover {
color: inherit
}
/* Create a class to allows to get hover color from inline style */
.dynamic-hover-color:not(:hover) {
color: inherit !important;
}
Then your markup will be somewhat like:
Markup
<nav class="sidebar">
<ul>
<li class="list-item">
<a
href="/foo"
class="dynamic-hover-color"
style="color: #{{category.color}};"
>
Category
</a>
</li>
</ul>
</nav>
I'm doing this example using handlebars but the idea is that you take whatever is convenient for your use case to set the inline style (even if it is writing manually the color on hover you want)
You can just use an inline stylesheet statement like this:
<style>#T1:hover{color:red}</style><span id=T1>Your Text Here</span>
You can use the pseudo-class a:hover in external style sheets only. Therefore I recommend using an external style sheet. The code is:
a:hover {color:#FF00FF;} /* Mouse-over link */
You can do id by adding a class, but never inline.
<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>
It is two lines, but you can reuse the class everywhere.
My problem was that I'm building a website which uses a lot of image-icons that have to be swapped by a different image on hover (e.g. blue-ish images turn red-ish on hover).
I produced the following solution for this:
.container div {
width: 100px;
height: 100px;
background-size: 100px 100px;
}
.container:hover .withoutHover {
display: none;
}
.container .withHover {
display: none;
}
.container:hover .withHover {
display: block;
}
<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>
I introduced a container containing the pair of images. The first is visible and the other is hidden (display:none). When hovering the container, the first becomes hidden (display:none) and the second shows up again (display:block).
I am using dhtmlxTreeview: https://dhtmlx.com/docs/products/dhtmlxTreeView/
I need to override an icon that is in a CSS file. If I go to the CSS file and override class, it is updated in the browser.
But when I run the first time and the pluging reloads again, the plugin doesn't respect the CSS override even if I use the !important keyword.
How can I override that icon file?
I need to change this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_file.gif);
}
To this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_folder_closed.gif) !important;
}
You will have to link your CSS file after the library's. This will make CSS's native specificity override the library's styles with yours.
Example: https://jsfiddle.net/zk4t2t8a/
<style>
div {
background: red;
}
</style>
<style>
div {
background: green;
}
</style>
<div>
Test
</div>
More information: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?
The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)
Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');
I understand the concept of css specificity.
Here is my situation:
I have a style for class called "success". This simply makes colors green...etc.
Now I have 2 separate css files that defines .success (they define a different style).
Let's call these Site.css and Page.css.
The class in Site.css is simply:
.success { color: green; }
The class in Page.css is more specified:
#MainRegion div .resultPanel .success { background-color: green; }
Now in javascript (using jquery), I add a class like so:
$("#MainRegion div .resultPanel").addClass("success");
Now, when I inspect this using a browser-debugger (F12), I can see that the Site.css style was applied (rather than the Page.css). I thought the class defined in Page.css has more specificity thus it should be the one that is called. Am I missing something about my understanding of how css specificity works?
You are missing something. This line of code
$("#MainRegion div .resultPanel").addClass("success");
returns
#MainRegion div .resultPanel.success
<div class="resultPanel success"></div>
and not
#MainRegion div .resultPanel .success
<div class="resultPanel">
<div class="success"></div>
</div>
So depending on what you want, you can change your css or the js to target the correct element
if your css is
#MainRegion div .resultPanel.success { background-color: green; }
then your js will work as expected
Honestly you should probably create a different class for success on one of your style sheets. If i am understanding correctly you are going to have a green BG with green font color. Both of the style sheets should work together since you are only defining different things for both calls but that isn't a best practice.
I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?
Simple example
<div id="test" style="color: red">test</div>
<style>
#test:hover {
color:blue;
}
</style>
In this case hover doesn't work.
Update
I can't use !important, because after it I will not be able to change that atribute via JavaScript.
Also I generate styles dynamically, so I can't add specific classes via JavaScript.
because inline css overrides your css styles in the file
if you had
color: blue !important
it would work but not recommended, you can always use jquery to remove the inline style tag though haha
Update:
remove the style tag using jquery or when using javascript... add !important so the inline css would have important
I can't use !important, because after it i will not be able to change
that atribute via javascript.
You can still use !important, just add a class with JavaScript and remove it anytime you want.
demo
The easiest way to go is the following
$(selector).hover(function() {
$st = $(this).attr("style");
$(this).attr("style","");
},function() {
$(this).attr("style",$st);
});
In CSS, the style attribute will override any style elements or stylesheets. If you cannot change the the style attribute, you'll have to use !important. If you can remove the style attribute altogether and place everything in the style element. Or even better, in a separate stylesheet your problem will be fixed.
P.S. The type attribute is required on style elements. This won't fix your problem, but you should change <style> to <style type="text/css">