in css I define the behavior of the text links like this:
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:hover {
color: #9999ff;
}
a:visited {
color: gray;
}
Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???
Thx
#Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:visited {
color: gray;
}
a:hover {
color: #9999ff;
}
This is a CSS Specificity issue.
Rules of the same specificity will apply according to the order they were defined.
You should move the more important rules to the bottom of the list, so they take precedence.
Any pseudo-class you don't need, simply do not define it
NB: 1. follow this ordering of a to ensure styling apply to links
2. It's not necessary to specify {visited, focus, active} if you aren't using it.
a,
a:link {
color: fontColor(color2);
text-decoration-color: fontColor(color4) !important;
text-underline-position: under; // to increase the gap between text and underlining in CSS
text-decoration-thickness: 2px;
font-weight: 600;
}
a:hover {
text-decoration-color: fontColor(color2) !important;
}
// mind you am using SCSS (fontColor(color2))
###Try this I think it will work###
hover MUST come after link and visited in the CSS definition in order to be effective active MUST come after hover in the CSS definition in order to be effective.
Copied from w3school
Related
In the email code, the a:visited and a:hover CSS style is not rendering/Working correctly in Outlook or Gmail email clients. I have added the CSS code like the following.
/* unvisited link */
a:link {
color: #526175;
}
/* visited link */
a:visited {
color: #D4B038 !important;
}
/* mouse over link */
a:hover {
color: #D4B038 !important;
}
/* selected link */
a:active {
color: #D4B038 !important;
}
.menutxt a:visited {
color: #D4B038 !important;
}
.menutxt a:hover {
color: #D4B038 !important;
}
This is about correct. Email clients do not support everything.
There are many versions of Outlook and Gmail though, and some do work, according to caniemail.
:visited doesn't have much support: https://www.caniemail.com/search/?s=%3Avisited
:hover won't work on Outlook desktop, but should work on Gmail desktop/webmail: https://www.caniemail.com/search/?s=%3Ahover
I suspect what is happening is that you have other things in your <style> that Gmail doesn't like, and what it then does is removes the entire <style>...</style> section! So, to isolate this, use the following:
<style>
a:link {
color: #526175;
}
a:hover
...
</style>
And let your other styles go in another <style> part. This isolates them so the first <style> section won't get removed if there's an error or unsupported style.
I am developing a website with two themes Light and Dark. I want to change the hover background of links based on the theme selected. What is the way to change the background of hover using CSS?
on a White background, I have a light blue hover background to link.
on a Dark background, I want to have hover background transparent to link.
I tried with changing class with the theme but I am not sure how to write selector for hover with the class change.
<a href='' className={theme ? ' top_section_link ' : ' top_section_link_dark '}>
CSS for hover on the link. It works fine for light theme but I don't know how to write selector if I change the class.
.lead a:hover {
color: #2161f2;
background: #f0f4fe;
text-decoration: none;
border-bottom: 2px solid #2161f2;
}
Make the hover css code dependent on the link. So instead of
.lead a:hover { /* ... */ }
write it this way:
.lead a.top_section_link:hover { /* Light/Default Theme Hover */ }
.lead a.top_section_link_dark:hover { /* Dark Theme Hover */ }
Another way would be to only switch a class on the body tag. This allows switching the theme without checking the current theme everywhere in your JS code:
body.light-theme a:hover{}
body.dark-theme a:hover{}
/* with other elements: */
body.light-theme button{}
body.light-theme button:hover{}
body.dark-theme button{}
body.dark-theme button:hover{}
Choosing this way, SCSS would make your life easier.
To target the link using the theme class names you can use a.top_section_link:hover or a.top_section_link_dark:hover.
.lead a:hover {
color: #2161f2;
background: #f0f4fe;
text-decoration: none;
border-bottom: 2px solid #2161f2;
}
.lead a.top_section_link_dark:hover {
background: none;
}
<div class="lead">
Link
Link
</div>
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.
I've got a menu like this one :
<ul id="menu">
<li>test</li>
<li>test2</li>
</ul>
and css :
#menu li a:link {
background: transparent;
}
#menu li a:hover {
background-color: red;
}
At some point in my code I need to make the background of the links transparent again, so I make a :
$("#menu > li > a:link").css("background","transparent");
Which works but after that, my problem is that it seems to wipe the background-color attribute of the css hover. Indeed when I hover the links again nothing happens. If that helps when I add color:blue in the #menu li a:hover css, the text is blue when I hover but still no background-color.
I figured out a way to do the hover with jQuery but I would prefer to do it with css since in my opinion that's how it should be.
Is it a bug ? Is there any way to make the background transparent without wiping the hover css ?
Thanks in advance,
Nolhian
I had this same problem, and my solution was to make two separate classes rather than change the background color in jquery.
a.default:hover { background-color: red; }
a.hovered:hover { background-color: transparent; }
$("#menu > li > a:link").removeClass("default");
$("#menu > li > a:link").addClass("hovered");
Target the background color directly, instead of simply "background":
#menu li a:link {
background-color: transparent;
}
$("#menu > li > a:link").css("background-color","transparent");
No, the problem is with your CSS and the fact it's being overwritten. Change:
a:hover {background-color: yellow; }
to this:
a:hover {background-color: yellow!important; }
Then it will work properly.
You can do a "onmouseover" javascript hover.
It's just a side effect of how CSS works. The :hover pseudo-class must be declared AFTER the :link pseudo-class. Changing :link will reset :hover, so you need to reset your :hover as well. One way to avoid this would be to move your CSS that alters the color from its initial setting into a class:
a:link {background-color: transparent; }
a:hover {background-color: yellow; }
a.myClass:link {background-color: cyan; }
And then
$("#menu > li > a:link").addClass("myClass");
And later
$("#menu > li > a:link").removeClass("myClass");
So it changes the background image, but not the background color.
Anyway care to point out the problem in my code?
JavaScript:
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
CSS:
.hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
As mentioned above... if you just add the following css, it will take care of it.
a:hover {
background-color: white;
background-position: top center;
background-image: url("img/dot.png");
background-repeat: no-repeat;
color: red;
}
:hover is a pseudo css class, and you can use it on anything, without needing to add the jquery/js to support it.
A shot in the dark:
you need to make sure that the nodes exist in the DOM before binding events to them. If you're calling your <script> in the <head> wait for document.ready:
jQuery(function($){
$("#menu a").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
Alternatively, you could be overriding the background-color property by using a selector with a higher specificity elsewhere. If you've defined styles such as a:link, a:visited, a:hover, a:focus, or a:active you will need a higher specificity selector to override it:
a.hover {
/* your styles here */
}
You'll need to provide more of your CSS for us to give you better advice.
You may have misspelled an ID or not nested your a elements under another element with [id="menu"].
As per ShankarSangoli's comment, you likely have another rule in your css that is overriding the background color, which in turn is likely a problem with specificity.
You can test this by changing your hover function slightly:
$("#menu a").hover(
function () {
//add 'background-color' as an inline css style which will have higher specificity than anything in the css.
$(this).addClass("hover").css('background-color', 'white');
}, function () {
$(this).removeClass("hover").css('background-color', '');
}
);
Your problem is that something overwrites your background color. Use firebug or another DOM inspector to find your problem. A hotfix is to make your background-color important but you should only use this for testing:
background-color: black !important;
If this works, you still need to find out what is overwriting your background.
Then you can do this with pure CSS
#menu a:hover {
background-color: black;
background-position: top center;
background-image: url("img/dot_hover.png");
background-repeat: no-repeat;
color: red;
}