This simple code is not working:
HTML:
<div id="topnav">
<ul>
<li>Aaaaaaa</li>
<li>Bbbbbbbb</li>
<li>Ccccccccc</li>
</ul>
</div>
CSS:
#topnav li a:hover:first-child{
color:#ff0000;
}
#topnav li a:nth-child(2):hover{
color:#FF7700;
}
#topnav li a:nth-child(3):hover{
color:#FFFF00;
}
Each link should have a different hover color. All of them show up as red. Why?
JSFiddle: http://jsfiddle.net/jeZHD/
Because there is only one <a> per parent element. That means, every <a> is the first child of its parent <li>.
Try it on <li> instead.
Working example: http://jsfiddle.net/jeZHD/2/
Here:
#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }
After wasting so much time on this, I just realized that the nth-child should be on the li's, not the a's. Like so:
#topnav li:first-child a:hover{
color:#ff0000;
}
#topnav li:nth-child(2) a:hover{
color:#FF7700;
}
#topnav li:nth-child(3) a:hover{
color:#FFFF00;
}
Related
The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you
try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}
You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}
Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}
Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.
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 have a menu using pure CSS, hover a parent li item display the the nested list. A simplified example:
<ul id="menu-top" >
<li class="menu-item">
Forums
<ul class="sub-menu">
<li>Register</li>
<li>Activate</li>
<li>Members</li>
</ul>
</li>
</ul>
The css:
.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color
.navigation ul.sub-menu li {
display:none;
}
.navigation ul li:hover > ul.sub-menu li { display: block; }
It works ok, but I'm trying to add an "persistent" effect, I want keep the parent style set when hovering also the sub-item.
I tried this but can't get working:
.navigation ul.sub-menu li:hover > .navigation ul.menu li { background: #ccc}
I don't know if this is possible without javscript or else, also can't find anything about using ">" in CSS.
THanks for any help
:hover is triggered on all ancestors of the element that is being hovered over, so .navigation ul.menu li:hover { background: #ccc; } should work just fine.
Alternatively, someday we should be able to use :has().
.menu-item:hover {
background-color:#ccc;
}
.sub-menu li:hover {
background-color:#666;
}
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}
I'm finishing up my first site: http://www.audio-agent.com/.
I just noticed that, while it looks correct in Firefox, the navigation menu padding and vertical alignment is off when viewed in Safari / Chrome.
Here's all the CSS I'm using for the menu:
ul#navigation {
background:url(images/navBgSlice.png);
color:#fff;
padding:6px 40px 6px 40px;
font-size:14px;
text-transform:uppercase;
text-align:right;
}
ul#navigation a.current {
color:#fcff00;
}
ul#navigation a:link, ul#navigation a:visited,
p.flip a:link, p.flip a:visited {
font-weight:normal;
}
ul#navigation a:active, ul#navigation a:hover,
p.flip a:active, p.flip a:hover {
text-decoration:none;
}
ul#navigation li {
display:inline-block;
padding:0 10px;
}
ul#navigation li:last-child {
padding-right:0;
}
And the HTML is just:
<ul id="navigation">
<a class="current" href="<?php blogInfo('url'); ?>"><li>Services</li></a> |
<li>Clients</li> |
<li>News</li>
</ul>
Any idea what could be going on? Any help is much appreciated!
Change:
ul#navigation li:last-child {
padding-right:0;
}
To:
ul#navigation li.last-child {
padding-right:0;
}
And add class="last-child" to your list:
<li class="last-child">News</li>
If you want full cross-browser support, this is the simplest way to accomplish this - As earlier IE and Safari struggle with the pseudoclass :last-child
Hope this helps.
Here's an example: http://jsfiddle.net/DAyjz/