I want to change color of a li element on hover,
<ul id="sitemap">
<li>a
<ul>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</li>
</ul>
here is the css code :
#sitemap li:hover{
background:#eee;
}
When I hover on any child li of a i.e b,c.. f it also changes background color of parent(a). How can I change the bg-color of only current li element on hover, there can be li at 3rd level also so what could be the general solution..
Simply add ul to your selector, and it will be fine
#sitemap ul li a:hover {
background:#eee;
}
The reason it wasn't working before is because it was targeting the top level li, so everything below it was apart of that li. Therefore, when the submenu was hovered, all of the block was highlighted
Fiddle
Add > into your css so that it has to be a direct descendant.
#sitemap ul > li > a:hover {
background:#eee;
}
For more information check out http://www.w3.org/TR/CSS2/selector.html#child-selectors
Related
I'm having a list of images and below the name of the person belonging to the image as an UL. When hovering on the name then a sentence to belonging to the person will be displayed.
So it looks like this
<ul>
<li>
Name
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
<li>
Name 2
<ul>
<li></li>
<li class="slogan1">some kind of sentence</li>
</ul>
</li>
</ul>
That works fine so far. I want now that the child UL Element of the first LI Element is being displayed initally when the page is opened and not only on the hover event. I was working around with :first-child but didn't had any success.
The current relevant CSS part looks as follows.
ul li ul{
display: none;}
ul li:hover ul{
display: block;}
ul li:hover ul li a{
background: #009EE3;
height:10px;}
ul li:hover ul li.slogan1 a{
background: #009EE3;
height:45px;
width:958px;
position:absolute;
left:0px;
padding-top:5px;
line-height:130%;}
For additional reference and to view the current implementation Link to page
Any help, tipps, hints are highly appreciated...many thanks...
first-child was the right idea, just add:
ul li:first-child ul {
display:block;
}
JSFiddle
Can you please take a look at this link and let me know why I am not able to change the background color of the li on hover?
<ul class="inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
Css:
.inline li{
width:18% !important;
background:#FFF !important;
}
.inline li: hover{
background:#A5A5A5 !important;
}
You have an extra space before hover.
.inline li:hover{
background:#A5A5A5 !important;
}
The space between li and :hover is valid CSS, but not in this case. Using li :hover will apply styles when you hover over any descendant of the li. What you are using is invalid CSS. You can't have a colon between an element and a pseudo-class. So by using li:hover, you are specifiying the styles when the li is being hovered over.
I would also recommend that you not use !important, because it can cause some problems later down the road. Use more specific DOM selectors, like ul.inline li:hover.
Fiddle
Edited jsfiddle. Remove the empty space before hover.
.inline li:hover{
background:#A5A5A5 !important;
}
You have an extra space before hover. It should be:
.inline li:hover {
Stylings
}
it s because you are using !important on the not hover li and there is a space between li and :hover
.inline li{
width:18%!important;
background:#FFF;
}
.inline li:hover{
background:#A5A5A5!important;
}
demo: http://jsfiddle.net/NRZeD/14/
i need only first 'li' element with gray background color. But first 'li' of each 'ul li' my background color gray is applying. Background color should apply only for the first li(My Example).
http://jsfiddle.net/fX9Gy/
Can anybody please solve the prob. Thanks
Give class to your parent UL. Write like this:
HTML
<ul class="parent">
<li>one</li>
<li>one
<ul>
<li>two</li>
<li>two</li>
<li>two</li>
</ul>
</li>
<li>one</li>
</ul>
CSS
.parent > li:first-child{background-color:#ccc}
Check this for more http://jsfiddle.net/fX9Gy/27/
Add this on the end of your css:
ul li ul li:first-child{background-color:transparent}
Or give the element an id:
<li id="first">one</li>
#first {background-color:#ccc}
** EDIT **
You could try this css:
ul li{color:red}
ul li > ul li{color:blue}
li {background-color:#ccc}
ul ul li {background-color:transparent}
li + li {background-color:transparent}
Either make the selector more specific:
ul li ul li:first-child{background-color:transparent}
Or add a class to the UL And select the first child there:
ul.nested li:first-child{background-color: #fff;}
... <li>one
<ul class="nested">
<li>two</li>
...
http://jsfiddle.net/Kyle_Sevenoaks/fX9Gy/15/
hi please see the updated css i hope this will work
ul li{color:red}
ul li > ul li{color:blue}
ul li:first-child{background-color:#ccc}
ul li ul li:first-child {background:none;}
http://jsfiddle.net/fX9Gy/23/
You can try this.
li {color:gray}
ul ul li {color:red}
li + li {color:red}
This will work in browsers down to ie 7 aswell
If you don't want to add class or id something, then you have to use jquery. but you need to add class name for ul.
but without jquery, using CSS you need to add one more line for ul which is inside li,
ul li ul li:first-child{ background-color:white; }
Updated fiddle. Added a class to parent ul
http://jsfiddle.net/fX9Gy/26/
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
I'm experimenting here with Pseudo-classes and trying to something I would usually do with a style class. I have a unordered list with multiple sub unordered lists and so on.
I want to only make sure the first level of li tags are been set to float left.
Here is my html
<body>
<div id="MainMenu">
<ul id="nav">
<li>Home</li>
<li>
About
<ul>
<li>The Product</li>
<li>Meet The Team</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
Business Hours
<ul>
<li>Week Days</li>
<li>Weekends</li>
</ul>
</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
</body>
I tried a style like this.
body {
font: 13px/160% Trebuchet MS,Arial,Helvetica,Sans-Serif;
margin:0;
padding:0
}
#nav{
list-style:none;
font-weight:bold;
width:100%;
}
#nav li{
float:left;
margin-right:40px;
position:relative;
}
The issue with this is, its saying all li descendants of id nav get set to float left. Now I only want the first level li tags to float to left and all the other level li tags to be ignored. Please don't answer by saying use a class name for all the top level li tags. I already am aware I could approach it like this. What I'm after is to learn some of the Pseudo-classes and how they may help me in this approach.
For example I need something that is like #nav li:first-child{ .... } But this is only going to give me the first li in the top ul list. I want all the top level children of the ul list and ignore the second level li tags and so on. Is there a Pseudo-classes that can accomplish this.
Thanks
you can use #nav > li this matches all elements that are the immediate li children of #nav.
More info here and here.
A demo: http://jsfiddle.net/9M6p2/
A good approach would be:
#nav li { float: left; }
#nav li li { float: none; }
You could use #nav li like you already do and #nav li ul or #nav li ul li to style the second level LI-Elements.