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;
}
Related
I am trying to make my <h1> element a link.
Here is the HTML:
<a href="site.html">
<h1 id="logo" class="lobsterfont" style="margin-top: -10px;">
Kusko Enterprise
</h1>
</a>
Here is the CSS:
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
#logo a:link {
text-decoration: none;
}
#logo a:visited {
text-decoration: none;
}
#logo a:hover {
text-decoration: none;
}
#logo a:active {
text-decoration: none;
}
Instead of removing the line after I run the code, the line under the link is permanent instead.
What am I doing wrong?
In your .css file, you are targeting #logo a:link element, while your a element is outside #logo. You should either target a directly:
a:link, a:href, a:focus, a:visited {
text-decoration: none;
}
or make <h1 /> outer in your HTML:
<h1 id="logo" class="lobsterfont" style="margin-top: -10px;">Kusko Enterprise</h1>
The latter used to be preferred, since headers are block elements and links are inline - but I am not sure if it is still the case.
You need to learn more about CSS Combinators. Your current CSS is targeting an a within an element with id=logo.
If you really want the h1 in an a tag give the a tag the id instead.
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
#logo:link,
#logo:visited,
#logo:hover,
#logo:active {
text-decoration: none;
}
/*Target h1 in an element with id=logo*/
#logo h1 {
margin-top: -10px;
}
<a href="site.html" id="logo">
<h1 class="lobsterfont">Kusko Enterprise</h1>
</a>
Insert the style tag with the style="text-decoration:none" attribute in the tag, so that your code looks similar to the following code:
<a style="text-decoration:none" href="http://Example.app.Com">nonunderlinedhyperlink</a>
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 3 years ago.
I have an interesting problem I am trying to solve. I have an anchor element with some span text element inside
.link {
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
Hi <span class="inside-text">there</span> dude.
What I'm trying to remove the underline on the span .inside-text and just underline the text outside the span on hover. I tried this
.text-inside {
text-decoration: none !important;
}
but it doesn't seem to solve the problem
You need to add display:inline-block to span
.link {
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
.link:hover .inside-text{
text-decoration: none;
display:inline-block;
}
Hi <span class="inside-text">there</span> dude.
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>
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