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; }
Related
So I have a div where the whole thing is an anchor tag and I am trying to control how the color is on hover and getting varying results. Hoping I can do this with just css. What is happening is on hover, one text changes, but not the other. But then also, the text decoration underline is still different. Just want it all to stay black even on hover, but on hover, the url underline appears on the text.
<style>
.welTile > p:hover {
color: black;
}
</style>
<div class="col-md-4">
<a href="#/mod1">
<div class="welTile">
<img src="assets/images/welcomeTile.png">
<p>Module 1: Moneyball Concepts</p>
<p>Learn the basic concepts you need to successfully complete the other 5 modules</p>
</div>
</a>
</div>
And a couple of screenshots of what is happening before and after hovering:
You need to target the different states of the anchor tag like this:
.col-md-4 a {
color: #000;
}
.col-md-4 a:hover {
color: #000;
}
.col-md-4 a:focus {
color: #000;
}
.col-md-4 a:active {
color: #000;
}
This CSS will keep everything to stay in black.
.col-md-4 a, .col-md-4 a:hover, .col-md-4 a:focus, .col-md-4 a:active {
color: black;
display:inline-block;
text-decoration: none;
}
Is there a :hover selector that can be used when an 'a' tag is clicked it causes it to change color and then turns back when the click is released?
Any help is much appreciated. :D
Use :active selector, this is used to select the active element, in this case the a element.
a:active{
color:purple;
}
<a>Click Me</a>
try this one too
https://jsfiddle.net/kLju23fx/2/
<code>
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
a:link {
color: red;
}
a:visited {
color: green;
}
</code>
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
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;
}
In My code I have
<div class="row-fluid"><div class="span12" style="color:red">${fn:length(alertStatusForm.totalNotSentRecipient)}</div></div>
Still Its not working
Please suggest
You must apply the CSS directly to the <a>. <a> elements will not inherit the font color by default.
CSS:
.span12 a{
color: red
}
a:visited{
color: red
}
Use this
.span12 a{
color:#000;
}
.span12 a
{
color : #FF0000;
}
.span12 a:visited
{
color: #FF0000;
}