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>
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;
}
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;
}
In my code. I am displaying title in anchor <a> tag and author name inside anchor in span tag. I write code for hover on anchor tag when hover on span it is working fine , but when hover on <a> it is only change hover effect on anchor tag and not change color for span.
HTML :-
<a href "#" class="link">
This is my link title
<span class="span-text">Author Name</span>
</a>
Css :-
span {
color: #ccc;
}
a {
color: #000;
display: inline-block;
}
a:hover, span:hover {
color:#9A1A4A;
}
fiddle here
Use instead
a:hover, a:hover span {
color: #9A1A4A;
}
Fiddle: http://jsfiddle.net/ySu3w/
!important is yuck, and not needed here.
a:hover, a:hover span {
color:#9A1A4A;
}
please try this
http://jsfiddle.net/roop1886/2cEYc/
css :
span {
color: #ccc;
}
a {
color: #000;
display: inline-block;
}
a:hover, a:hover span {
color:#9A1A4A;
}
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; }
How can I apply a font color only to hyperlinks which have already been visited and are being hover by the mouse?
Essentially, what I want to do is
a:visited:hover {color: red}
Yes that is possible.
Here’s an example:
<style type="text/css">
a:link:hover {background-color:red}
a:visited:hover {background-color:blue}
</style>
foobar
There is a css declaration order for this to work properly as was mentioned earlier, although it didn't cover this particular option, it does make a difference. I've tested this on Chrome.
The order is
a:link { color: red; }
a:visited { color: blue; }
a:visited:hover { color: yellow; }
a:hover { color: green; }
a:active { color: gray; }
It will work whether it comes before or after a:hover as long as both a:hover and a:visited:hover are after a:visited and before a:active. I just prefer to keep the two visited links together and the two hovers together.
there is a sequence between link css to take effect..
a:hover must come after a:link and a:visited and a:active must come after a:hover
for more details refer below link..
http://www.w3schools.com/css/css_pseudo_classes.asp
FWIW, I was unable to style just color on a:visited:hover (Chrome/FF) without declaring a background for :link:hover (anything other than none or inherit seems to work, I used rgba() for alpha sake).
For this to work in Chrome/FF:
a:visited:hover {
color: #f00;
}
... (something like) this must be present:
a:link:hover {
background-color: rgba(255, 255, 255, 0);
}