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
Related
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 3 years ago.
I have this structure:
<a href="" class="link">
<div>
<div class="innerdiv-with-underline">text with underline</div>
<div class="innerdiv-without-underline">text</div>
</div>
</a>
I would like that on :hover only the text inside innerdiv-without-underline would not be underlined.
I have tried this with no luck:
.link .innerdiv {
text-decoration:none !important;
}
What can I do ?
You may want to use text-decoration property in the class .link instead of class .innerdiv
.link {
text-decoration: none;
}
.link:hover .innerdiv-with-underline {
text-decoration: underline;
}
<a href="" class="link">
<div>
<div class="innerdiv-with-underline">text with underline</div>
<div class="innerdiv-without-underline">text</div>
</div>
</a>
Just remove innerdiv from .link .innerdivCSS, as achor tag has text-decoration css property assigned, not DIV
.link {
text-decoration:none;
}
Your css rule is this:
.link .innerdiv {
text-decoration:none !important;
}
First of all there is no class named innerdiv. You might've meant innerdiv-without-underline. So probably you should have used this:
.link .innerdiv-with-underline {
text-decoration: none;
}
Alas, this wouldn't work either. Since the underline is coming from the decoration of the <a> tag not <div> tag. So specifying a rule for only the div won't work. What you could have done is:
.link {
text-decoration: none !important;
}
This will remove underlines from all the links. But now you want one to have underline on hover and another to not.
.link {
text-decoration: none;
}
.link:hover .innerdiv-with-underline {
text-decoration: underline;
}
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 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>
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
I know for links the css is
a:focus {
text-decorations: none;
-mozselectedsomethingorother: none;
}
or something like that, but is there a way to remove the blue border
http://cl.ly/1d20272p36180S3f1c36
If you have an anchor wrapped around an image, this css should work:
a img { border:none; }
a:focus { outline: none; }
And....someone already answered in the comments :-)
text-decoration: none;
not decorations