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.
Related
I have a nested span in a li element. I want the color of the li only to change when it is hovered over. However
#sortable li:hover:not(.ce){
background-color:#3f0;
cursor:pointer;
}
does not work. The li changes color when my cursor is over the span as well. How can I make the li only change color when it --and not the span-- is hovered over?
http://jsbin.com/alExeVO/16/edit
As your <span> is part of the <li> your code behaves as expected. A hack would be to add a hover to your span so it changes to the original color.
Give the span and the li their own hover features. Check it out.
SEE DEMO HERE
ul{
list-style-type:circle;
text-align:center;
}
ul li{
display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}
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.
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;
}
for the first time i made a jquery slider using coda slider.
but i want to customize the menu, i want a little a arrow that will show on the top of the li a when you hover it and if it's active.
How will i do that? should i use a image? or can i achieve the effect using css3?
<ul class="navigation">
<li>Sites</li>
<li>Files</li>
<li>Editor</li>
<style>
.navigation {
padding:0px;
margin-bottom:90px;
}
ul.navigation li {
list-style-type:none;
}
ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}
ul.navigation li a:hover {
background-color:#666;
/*there should be some sort of background image here or css3? */
}
.active {
/*there should be some sort of background image here or css3? */
}
<style>
ul.navigation li a:active { }
.selected:hover {
/* you can use CSS3 to make arrows or image both */
}
After analyzing, I observed, that plugin adds .selected class to that li element which is selected. So, you can also use CSS3 to make arrows by using :after and :before psuedo classes with display:none and show only on hover of .selected.
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
/* do whatever */
}
Just in case you have a sub menu, I used the direct descendant selector (>).
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; }