I have a class inside a link tag like this:
<a class="title" href="page.php" >some text and <span class="highlight" > keyword</span></a>
css:
a:visited{
color: purple;
}
.highlight{
color: yellow;
}
when i click the link it becomes purple but the keyword remains yellow, what to do?
You could do it like this:
JSFiddle - DEMO
HTML:
<a class="title" href="#">some text and <span class="highlight" > keyword</span></a>
CSS:
a:visited, a:visited > .highlight {
color: purple;
}
.highlight {
color: yellow;
}
If you want to style elements matching .highlight when they are inside a visited link differently to ones outside a visited link, then you need to write two rule-sets for it.
Use a descendant combinator.
.highlight {
/* regular */
}
a:visited .highlight {
/* inside a visited link */
}
Add this to css:
a:hover, a:hover > span{color: purple;}
Related
For unknown to me reason, for a div with "TWO" inside:
:hover state works fine
:link, :visited don`t work
I can't find why?
.menu:link {
color: teal;
}
.menu:visited {
color: red;
}
.menu:hover {
color: yellow;
}
<div>
<a>
<div class="menu">ONE</div>
</a>
<a href="smth.html">
<div class="menu">TWO</div>
</a>
</div>
:visited and :link selectors are used with <a> tag.
a:visited > .menu{
color: red;
}
a:link > .menu {
color: teal;
}
a:hover > .menu {
color: yellow;
}
<div>
<a>
<span class="menu">ONE</span>
</a>
<a href="https://stackoverflow.com" target="_blank">
<span class="menu">TWO</span>
</a>
</div>
by the way, I don't think it is a good idea, to use div inside a
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 simple rule form all <a>:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
But I don't want this to apply for <img> inside <a>:
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
How can I ignore this?
You would need to add another set of classes after the first, targeting a img, a img:hover, etc. However, an img element doesn't support text-decoration. What is it your trying to avoid with the image?
You could add a class to the <a> tag.
For example
<a href="link" class="image">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
and then with css:
a.image{
}
In this example you would have to specifically set rules to counter the previously set rules for all <a> tags
Another approach would be to use the extra class in conjunction with the :not selector
a:link:not(.image) {
text-decoration: none;
}
a:visited:not(.image) {
text-decoration: none;
}
a:hover:not(.image) {
text-decoration: underline;
}
a:active:not(.image) {
text-decoration: underline;
}
Put your href inside of a div and assign a class to that div; you can then style the class followed by a:
<div class="stylin">
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
</div>
And then in the stylesheet.
.stylin a:link {
}
Unfortunately there is no way to look and see if an img has a link as a parent (parent selector) to then change the link element based on that. You would need Javascript or JQuery to do that or you can just add a 'link-img' class to any link elements containing an image and set it's CSS properties accordingly.
HTML:
Link 1
Link 2
Link 3
<a class="link-img" href="#">
<img src="smile.png"/>
</a>
CSS:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
.link-img {
text-decoration:none;
}
a:link .myClass,
a:visited .myClass,
a:hover .myClass,
a:focus .myClass,
a:active .myClass {
text-decoration: none;
}
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; }