I'm attempting to make my anchor text white when a person hovers over a nav item or when the nav item page is active.
Currently, all is well except the text color. Sounds simple enough but I'm struggling.
I'd like the anchor text to become white when the nav item is either hovered over or is the active page. Currently the anchor text just turns grey, I suspect due to the opacity thats on there too.
Here is the code that I have been using:
.dropdown ul li.current_page_item,
.dropdown ul li:hover,
.dropdown ul li.on {
background-color: orange;
opacity:0.4;
color: white;
}
It could be that this is not the relevant sample of code but I cannot see what else could be important here. I'm working on a Wordpress site and am finding working with the CSS a little tricky. Here is the site itself if anyone thinks I've not added the relevant snippet: http://tinyurl.com/m562wgd
The anchor tag does not inherit the color from its parent, so you should set it explicitly:
.dropdown ul li:hover a{
color: white;
}
Remove color: white; from your .dropdown ul li.on rule and instead add it to this new css rule:
.dropdown ul li:hover > a {
color: white;
}
Add the css to hyperlink inside the li tag
.dropdown ul li a:hover {color: white;}
You're right that it's the opacity that's making the text appear gray. The way you have the code you are applying a 40% opacity to the white text. If you truly want white, either drop the opacity completely or make it a higher value (0.9).
Not sure why you want the opacity, but keep in mind that not all browsers recognize opacity - and show the 100% white. And I believe IE8 and lower do not support the :hover psuedo-class on anything but an tag.
.dropdown ul li.current_page_item a,
.dropdown ul li a:hover,
.dropdown ul li.on a {
background-color: orange;
opacity:0.4;
color: white;
}
Hope this helps.
Related
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
There's a background hover in the bootstrap 'More' dropdown in the left nav here which I'm trying to get rid of, I can't see where the background colour is coming from and I removed all background hovers.
Anyone know how I can locate the CSS affecting it?
EDIT: sorry, this answer is dedicated to the bug in the dropdown on the right side.
Is it this piece of code that is bugging you:
Structure.css / line 596:
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover
{
background-color: #464358 !important;
color: #fff;
}
I found that one with the Firebug extension for Firefox. Install, rightclick on the item, "analyze with Firebug".
Today browsers come with built-in element inspection tools, but Firefox has the popular Firebug plugin as well. You should have the option to artificially set :hover on an element you are inspecting.
Anyway, you don't need to know where the rule is to override it. Just set background-color: auto !important on the selector, that should do the trick.
#top-nav .dropdown-menu li:hover, #top-nav .dropdown-menu a:hover, .dropdown-menu > li > a:hover {
background-color: #464358 !important;}
Remove this lines
Use firebug for it #left-nav .dropdown-menu > li > a:hover
CSS line 1353
Try this:
ul.dropdown-menu li a:hover{
background: #fff !important;
cursor: default;
}
Or this if you want to achieve the same parent background color:
ul.dropdown-menu li a:hover{
background: transparent !important;
cursor: default;
}
I want the colors of a text box and its link to invert upon hovering over it. But what happens is that first the box's background color inverts, and only when the cursor moves over the text (link) the text color inverts.
#nav span:hover {
color:white; /* ignored ! */
background-color:#687078;
}
Apparently the color:white is ignored (because a:hover has precedence?)
How can I change both colors simultaneously?
full HTML and CSS: http://jsfiddle.net/stevenvh/LvgRJ/4/
Use
#nav span a { color:#214275; text-decoration:none; }
#nav span:hover { background-color:#687078; }
#nav span:hover a { color:white; }
Demo
The problem with your code is that, when you hover <span> but not <a>, then only #nav span:hover rule applies, but not #nav span a:hover. You must use #nav span:hover a instead.
Off-topic: consider using childhood selectors (>) instead of descendant ones, which are a bit slower.
Use the selector:
#nav span:hover,
#nav span:hover a {
color: white;
}
Causes the a to be coloured when hovering the span element; or:
#nav span a {
color: inherit;
}
Which causes the a to inherit its color from its parent/ancestor.
I'm fiddling with a Wordpress navigation. I have a navigation where in hover state the background of each li item turns orange and the text is meant to turn white from black.
It appears though that there are 3 colors going on. With no hover the <a> is black, when the <li> item is hovered over the <a> tag text is grey and when you hover the very middle, the <a> tag, the color of the text is white.
There should be two colors for the anchor text: black for default and white when hovered. I need to stop the grey so that when the orange is activated, so too is the white text.
There are a few pieces of code from this Wordpress site that could be relevant. I'm guessing these ones below but cannot see where I would edit for this particular issue. If anyone can offer a pointer the website is here, I'm not even sure what I should be trying to select:
tinyurl.com/m562wgd
/* 2.2.1 Top Drop-down menu */
.dropdown ul,
.dropdown ul li,
.dropdown ul ul {
list-style: none;
margin: 0;
padding: 0;
}
and
.dropdown ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
.dropdown ul li.hover,
.dropdown ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
The grey is coming from the li changing opacity. You only see the white when you hover over the anchor tag because that is the Only place you have the hover set
Add
.dropdown ul li:hover a {
color: white;
}
That should do it
There is no gray, just an opacity change in the rule:
.dropdown ul li.hover, .dropdown ul li:hover, .dropdown ul li.on {
background-color: orange;
opacity: 0.4;
}
Which makes the black appear to be gray. You also want to add the following rule to make the link white when you hover over the list item:
.dropdown ul li:hover a {
color: white;
}
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }