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.
Related
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
I do not have it set up anywhere in the stylesheet for hovering a link to be #EEEEEE, I am wanting the navbar hover to be the same color as the navbar background so that you can't see any difference when it is hovered.
Here is my current stylesheet: Pastebin
Here is a demo of the site as it currently stands:
Link
That's the default hover state of Bootstrap:
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
You already have a selector that can override this, just include the background property:
#header a:hover {
color: #fff;
text-decoration: none;
background:none;
}
Add this to your stylesheet.
ul.nav a:hover { color: #fff !important; }
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
The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6.
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;)
Any ideas on why this is happening and how I can fix it appreciated.
The complete styling for the nav below:
.side_nav
{
text-align : left;
margin-left: -10px;
}
.side_nav ul
{
list-style-type: none;
list-style-position:inside;
margin-left:0px;
}
.side_nav li
{
margin-top: 10px;
display: list-item;
list-style-type:none;
}
.side_nav a, .side_nav a:visited
{
text-decoration: none;
color : #9F1F63;
font-weight : bold;
padding: 5px 10px 5px 10px;
}
.side_nav a:hover
{
color:#B26D7F;
}
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML.
<div class="side_nav">
<a class="active" href="Page1.aspx">Page1</a><br />
Page2<br />
Page3<br />
</div>
In IE6, it matters which order you specify the anchor links. You should specify them in this order to achieve the intended result: first a:link, then a:visited, a:hover and a:active.
Your CSS has a period where there should be a colon, in .side_nav a.active (should be .side_nav a:active
With this fixed, it works for me in IE6.
I tried copying your code, and the format did work.
Your problem is you see the link as visited - you have both formatting of the visited and active (so you have the purple background and the purple text).
You should override the color for visited links with the active class:
.side_nav a.active, .side_nav a.active:visited
{
color: #FFFFFF;
background-color: #9F1F63;
}
Try adding a more specific selector to .side_nav a.active such as div .side_nav a.active where div is the parent element.
The color is probably being overwritten from the .side_nav a rule.
Also, you may have a typo - are trying to use the :active selector?
Try to use !important. Like this:
.side_nav a.active
{
color: #FFFFFF !important;
background-color: #9F1F63;
}