I have two pre-defined classes (class-normal and class-on-select). A few li elements are making use of class-normal.
How do I make them use class-on-select only on focus/hover?
You can use :hover, :focus on same class to achieve these effects:
HTML:
<ul>
<li>Random li</li>
</ul>
CSS:
ul li {
color:black;
background:#BFBFBF;
border:1px solid #000;
/*css for class-normal*/
}
ul li:hover {
color:#fff;
background:#000;
border:1px solid #000;
/*css for class-on-select*/
}
Demo: http://jsfiddle.net/GCu2D/600/
class-normal:hover , class-normal:focus{
//your styling here
}
will do the trick.
You can try something like this:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
<p><b>Google</b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
JSFiddle Demo
Related
Why does the text not remain white once hover is engaged? Should the active state keep this white?
a:hover {
color: green;
}
nav ul {
background-color: #444;
text-align: center;
}
nav a {
color: #fff;
}
nav a.active {
color: #fff;
}
nav a:hover {
background-color: #005f5f;
}
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
Well, you did set the color to green on hover. Remove that declaration and you should be good to go:
/*a:hover {
color:green;
}*/
Edit:
To answer your second question, the active "state" (in your CSS it is a class) keeps it white because the selector nav a.active has a higher specificity than a:hover.
Remove the following.
a:hover {
color:green;
}
Or if you wish to understand what's happening, change it to:
a:hover {
color:red;
}
Use CSS for the required text
a:hover {
color:#000000;
}
I'm working on a project that has these requirements:
When hovering over a section with anchors, the colors of all anchors in that section (non hover/active state) change.
The active/hover state color of these anchors should inherit the normal anchor active/hover color.
I was able to achieve the first requirement, but the active/hover states don't change at all when hovering over the specific link. It's obviously an issue with specificity, but I can't seem to figure out why.
Here is a boiled down version of the code: http://codepen.io/dbough/pen/maxrv
a:link, a:visited {
color:green;
}
a:hover, a:active, header .color a:hover, header .color a:active {
color:pink;
}
.color a:link, .color a:visited{
color:red;
}
$("header").hover(function() {
$("header").addClass("color");
},
function() {
$("header").removeClass("color");
}
)
In the simplest terms.
Define a color for all links
Set a hover color hased on the ul being hovered
Set a different colow when the a is hovered
a:link {
color:green;
}
ul:hover a {
color:pink;
}
ul a:hover {
color:red;
}
Codepen Example
Does that not meet the criteria(?)...and no JS required
This has nothing to do with specificity, your selector just doesn't match.
header .color a:active {
You are using JavaScript to add a class to the <header> element, but you are writing a selector where the element with the class is a descendant of the <header>.
Remove that descendant combinator from the selectors:
header.color a:active {
delete your style and jquery hover function and try use this (only css):
html,body {
margin:0;
padding:0;
}
header {
width:50%;
padding:auto;
margin:auto;
}
li {
display:inline;
padding:50px;
}
a, a:link, a:visited{
color:green;
}
a:hover, a:active{
color:pink !important;
}
header:hover a{color:red;}
I'm trying to change the colour of the list points but it's not working?
<div class="mobile-menu" id="mobile-menu">
<div id="mobile-menu-links">
<h4>General:</h4>
<ul class="mobile-menu-links">
<li>News</li>
<li>The boring rules!</li>
<li>The rankings</li>
</ul>
.mobile-menu #mobile-menu-links ul{
list-style-type: none;
margin:0;
padding-left:3%;
}
.mobile-menu #mobile-menu-links ul li{
padding-bottom:2px;
border-bottom:1px solid #bababa;
}
If I add color:red in either of the two CSS declarations, it doesn't change the colour.
Please note that the HTML is closed in my document, I just copied the first part for you to see.
Thanks.
there are multiple ways to do it...
idea behind coloring the bullets
ul { list-style: none; }
li:before { content:"\2022 \00A0"; color: red; }
jsfiddle
another link
as per comment, I am able to see color change jsfiddle
Please add extra below CSS stuff
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
Here is the fiddle
Try it this http://jsfiddle.net/Dnxmm/. [ul] must be front.
ul.mobile-menu-links{
margin:0;
padding-left:3%;
color:red;
}
ul.mobile-menu-links li{
padding-bottom:2px;
border-bottom:1px solid #bababa;
color:red;
}
Is it possible like lets say the text in the div header has a red hover, and the text in the div in the footer a white hover?
Or is this just not possible and can you only set 1 style for the whole document?
This is very much possible, just like any other element you can style them separately by being more specific.
If you have this HTML:
<div id="top">
First link
</div>
<div id="bot">
Second link
</div>
With this CSS you would style both links:
a:hover {
color: #000;
}
With this CSS you can style them separately:
#top a:hover {
color: #f00;
}
#bot a:hover {
color: #fff;
}
You can set as pretty much as many as you want to if you just hook it right:
/* every a:hover has color red */
a:hover { color: red; }
/* #footer a:hover has color green. */
#footer a:hover { color: green; }
/* Every link that has class ".ThisClass" will have yellow color */
a.ThisClass:hover { color: yellow; }
Yes this is possible.
#header a:hover {
color: #f00;
}
#footer a:hover {
color: #0f0;
}
http://jsfiddle.net/wrygB/2/
You may want to split this though so you can use the same hovers elsewhere. In which case you would do:
.main:hover {
color: #f00;
}
.sub:hover {
color: #0f0;
}
And then you can apply a class of main or sub to any element to get the hover effect.
Well you'd just select the element the a:link is within, and apply styles like that.
i.e
#header a:hover { color: red; }
#footer a:hover { color: white; }
Why the following styling of the link does not work ?
<html>
<head>
<style type="text/css">
a:link {color:#123456;} /* unvisited link */
</style>
</head>
<body>
Visit Google
</body>
</html>
Thanks !
For some general best practices, the link styling hierarchy works like this:
a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #cccccc;
}
a:focus {
color: #cccccc;
}
a:active {
color: #cccccc;
}
It's best to always apply all of these, whether you do them singly as above or like this:
a:link, a:visited {
color: #ff0000;
}
a:hover, a:focus, a:active {
color: #cccccc;
}
But regardless, the order is very important and things can be overwritten if it isn't followed.
It's because the link has been visited.
Try
a {color: blue;} /* unvisited link */
a:visited {color: orange;} /* visited link*/
If you remove the last declaration links will be blue regardless of :visited.
And you shouldn't rely on it working in the future:
http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/