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;
}
Related
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;
}
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;}
I have such a structure of HTML:
<p>
<a href="#">
<span class = "class-for-span"> SOME TEXT HERE </span>
</a>
</p>
and CSS:
p a{
color: grey;
text-decoration: underline;
}
.class-for-span {
color: red;
text-decoretion: none;
}
.class-for-span:hover {
text-decoration:underline;
}
I want to get somethink like this:
For every a inside p i need grey underlined link. If there is span into a tag it must be red without decoration, and red underlined when its hover.
Now I have grey underlined link, if span inside a tag - red link with grey underline and red link with red udnerline when it's hover.
How can i solve my problem only with css? I've been trying also something like this:
p a span .class-for-span {
text-decoration: none;
}
but it's not working too...
p a span .class-for-span {
text-decoration: none;
}
Won't work because of the space between span and .class-.... That would imply "the element with class class-... within the span". You can't overwrite an element's parent's property in CSS. The solution would be to set text-decoration:none; on the a tag and only use it on the span:
p a { text-decoration:none; }
p a span.class-for-span { text-decoration:none; }
p a:hover span.class-for-span { text-decoration:underline; }
This will cause the underline to appear when the anchor is hovered over, but not necessarily when the span is hovered over. So the underline would still appear on the span even if you had:
<span>Text</span><img src="..." alt="" />
...and hovered over the image.
the a element is what is being underlined, not the span, so when you remove the underline from the span, you still have the a element keeping its underline. make your original block
p a span {
color: grey;
text-decoration: underline;
}
and everything should begin to work
p a:link, p a:hover, p a:active, p a:visited {
/* works for any 'a' tag inside a 'p' tag */
border-bottom: 2px dotted #CCCCCC;
}
that will work for these:
<p>Hello<br>
Hello again</p>
Simple question: I have the following markup...
<a href='#'>
<img src='icon.png'> This is the link
</a>
I want to have the text become underlined on mouseover.
What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.
a:hover {
text-decoration: none;
}
a:hover <select_text_here> {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img{
text-decoration: none;
}
should do it. This way all the img tags inside a will be without any underline.
The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:
<img src="" /><span class="link-text">Foo</span>
Obviously you can then just use .link-text to select it.
Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.
You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.
I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:
<img ... /> <span>...</span>
And then apply text-decoration to span element:
a:hover span {
text-decoration: underline;
}
As far as I know you're not able to select the text only.
Perhaps try this :
a:hover {
text-decoration: underline;
}
a:hover IMG {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
another thing you could do is
a{
background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}
or similar, so you don't have to have the image element in the link