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;
}
Related
Just asked a similar questions but turned out i overlooked where i placed the tag. It was fixed but created another issue.
Added a style to the hover of the links whereby a border appears upon hover:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: white;
border-bottom: #16b2d9 solid 3px;
}
All works fine however, is there a way to make the border length adjust depending on the length of the text?
You could use an underline instead of a bottom border:
.navbar-default .navbar-nav > li > a:hover {
padding: 5px;
color: black;
text-decoration:underline;
}
http://jsfiddle.net/gratiafide/goLk6gcf/3/
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>
PS:
If you look closely at the bar when your hovering over a link a few pixels at the far right side stay black. Why is that and how do I fix it?
The code for the current Navigation bar is as follows:
HTML:
<body>
<div class="navbar">
-home
about
store
contact
</div>
</body>
CSS:
.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}
As you can tell by the code, I'm trying to set the color of the home link to red. But this obviously didn't work. How should I go about it?
current is the id of the link element, so #current {background-color:red;} should do.
Now you're trying to set the color of the link element inside the element with id current.
Change your CSS rule from :
#current a:link, a:visited{
background-color: red;}
to
#current {
background-color: red;}
jsFiddle example
Your rule specifies the element with an ID of #current and then the child links of it when just #current is enough.
You forgot comma after #current in your CSS. You don't need rest of line. Also you can write either #current only or a#current.
Your CSS is incorrect.
#current a:link
this is saying style a link INSIDE an element with an Id #current
however your link IS the element with the id, try this:
a#current { color: red; }
It would better better to use a class though:
a.red { color: red; }
and then:
<a class="red">bla</a>
The main issue, as everyone has indicated is that the element that you are trying to change #current is also the anchor tag, so you have to say a#current:link or #current instead of #current a:link since the anchor tag is not a child of the #current tag.
Here's my jsFiddle, if you're interested.
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; }
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