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>
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;
}
So I have a div where the whole thing is an anchor tag and I am trying to control how the color is on hover and getting varying results. Hoping I can do this with just css. What is happening is on hover, one text changes, but not the other. But then also, the text decoration underline is still different. Just want it all to stay black even on hover, but on hover, the url underline appears on the text.
<style>
.welTile > p:hover {
color: black;
}
</style>
<div class="col-md-4">
<a href="#/mod1">
<div class="welTile">
<img src="assets/images/welcomeTile.png">
<p>Module 1: Moneyball Concepts</p>
<p>Learn the basic concepts you need to successfully complete the other 5 modules</p>
</div>
</a>
</div>
And a couple of screenshots of what is happening before and after hovering:
You need to target the different states of the anchor tag like this:
.col-md-4 a {
color: #000;
}
.col-md-4 a:hover {
color: #000;
}
.col-md-4 a:focus {
color: #000;
}
.col-md-4 a:active {
color: #000;
}
This CSS will keep everything to stay in black.
.col-md-4 a, .col-md-4 a:hover, .col-md-4 a:focus, .col-md-4 a:active {
color: black;
display:inline-block;
text-decoration: none;
}
This question is for http://chameleonwebsolutions.com. I need it so that when you hover over the social media links, their color changes to a darker green (#72984a). I tried:
.site-header .fa a:hover {
color: #72984a !important;
}
.fa .fa-facebook-square a:hover {
color:#72984a !important;
}
.social-icons a:hover {
color:#72984a !important;
}
.logo .mobile-social-icons .hidden-tablet a:hover {
color:#72984a !important;
}
.social-icons .hidden-mobile .responsive-header-gutter a:hover {
color: #72984a !important;
}
In the stylesheet but none of them are showing up in the inspector. I would try just a:hover in the stylesheet (no class before it) but then of course that would apply to all of the hyperlinks. How can I style only the social media links when you hover over them? Thanks!
The squares are inside the <a> tags, not the other way around like you're trying to do. Your CSS .fa a:hover applies to <a> inside the .fa which is the class for the squares.
The problem is that the green color is applied to the squares <i> not the <a>. I cannot test your code, but try this:
.social-icons i:hover {
color: #72984a;
}
Or of course this is the same but using class selector instead of tag:
.social-icons .fa:hover {
color: #72984a;
}
However, if you want to follow the exiting CSS way, use this:
.site-header .fa:hover {
color: #72984a;
}
In all cases, always try to apply the correct styles and avoid using !important.
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;
}
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