I have a html menu:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
and css:
ul li a{
color: black;
}
ul li a:hover, ul li a.active{ /* it was ul li a:hover for two times */
color: red;
}
When I'm hovering on a non-active element, there is two red elements and it is normal.
The problem is changing color for hover-element only and removing it on active (turn to black).
Is there any trick to do this without JS?
edited: there was an error. ctrl-c -> ctrl-v is evil
Assuming your ul element isn't bigger than the space your li s take up:
ul:hover a.active
{
color: black;
}
Or possibly Shawn's answer, depending on if you're talking about the class active or the link status.
ul li a:active {
color: black;
}
Related
My nav bar HTML looks like:
nav {
font-size: 20px;
list-style-type: none;
color: red;
}
<nav>
<ul>
<li>Me</li>
<li>Page 2</li>
</ul>
</nav>
Why is color: red not changing the color of the li text? Shouldn't selecting nav apply changes to everything that is a child of nav as well?
Because anchor tag <a> will overwrite the property color and make it blue
nav {
font-size: 20px;
list-style-type: none;
color: red ;
}
/*make anchor tag red with no underline*/
a{
color:red;
text-decoration:none;
}
/*when you point by mous on it make the color green*/
a:hover{
color:green;
}
<nav>
<ul>
<li>Me</li>
<li>Page 2</li>
</ul>
</nav>
this is a Anchor Tag (a) in the nav. And a tag have default property to styling, which can't be overwrite by parent nav tag.
What you have to do style the a tag separately and first remove text-decoration.
You final css will be:
nav ul li a{
text-decoration: none;
color: red;
}
It will not change because you are styling an anchor tag that is inside un-ordered list. To do it, you should target all the anchor inside un-ordered list also list-style-type will not work on nav but work on un-ordered tag. check the snippet below
nav ul {
list-style-type:none;
}
nav ul li a{
color:#ff0000;
}
<nav>
<ul>
<li>Me</li>
<li>Page 2</li>
</ul>
</nav>
I have an un-ordered list with link tags inside and I would like to change the color of the background and the text when the list is hovered by the users mouse.
Here is my html:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Here is my css:
li:hover {
background-color: #60266f;
}
I can't seem to work out how to apply a text color to the li tags as well as a background color.
Can anyone explain where I may be going wrong?
The browser is setting a color to a:hover, and it would override any color style you put in li:hover
You can add a style to it using CSS like this:
li:hover {
background-color: #60266f;
}
li:hover a {
color: #f00;
}
You can see it in this JS fiddle: https://jsfiddle.net/eytbzuq8/
There's a difference between background-color: (or background:) and color.
That last one is the one you're looking for.
Details:
li:hover {background: red;} to set the background of
the list-item.
li:hover a {color: yellow;} to set the text-color of the a inside the list item.
Notes:
Instead of li a:hover I used li:hover a because this will cause the text color to change if you only hover the list item itself. Sometimes these list items might be bigger than the link itself.
I did not use a comma to combine li:hover and li:hover a. This makes it possible to change text outside the link to another color than the link itself.
Example:
li:hover {color: red; background: cyan;}
li:hover a {color: yellow; background: red;}
<ul>
<li>Link 1
</li>
<li>Link 2 with some text outside the a-tag.
</li>
</ul>
You can do this:
First you make the background on the li, second you make the color of text
CSS
li:hover, li:hover a {
background: #60266f;
color: #fff;
}
DEMO HERE
li a{ display:inline-block; color:red; background:black }
li a:hover{ color:white; background:green; }
I am trying to render a background color on the list item that is the first child of the unordered list.
HTML structure is as follows
<div class="nav-collapse">
<ul class="nav">
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
and to apply the background color on the first child element I did
.nav-collapse > .nav:first-child {
background-color: orange;
}
It renders orange background to all list items.
I've played with slight variations but it doesn't make difference.
.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child
Here is the Demo
Use the following:
.nav > li:first-child {
background-color: orange;
}
Working jsFiddle here
You were trying to style the first .nav item - which there is only one of. Simply change it to style the first li that is a direct child of .nav.
If you want to be more specific use:
.nav-collapse > .nav > li:first-child {
background-color: orange;
}
You can do it in many ways, try this too
ul.nav > li:first-child {
background-color: orange;
}
I have a list within a list, but I don't want the inner list to receive the outer list's styles. This is my code:
CSS:
li {
background-color:red;
}
#sections li {
color:blue;
}
HTML:
<ol id="sections">
<li>Item 1</li>
<li>Item 2</li>
<li>
<ol><li>Item A</li>
<li>Item C</li>
</ol>
</ol>
I could just set color to whatever my default is, but that's sort of a hack, and in the future if i add something to the #sections li style it could mess with the inner list style, so I presume this is bad coding form.
How do i make the inner list be unaffected by the outer list?
May want to instead do a new style for nested lists, like this:
ol ol li,
ol ul li,
ul ol li,
ul ul li
{
/* Nested list styles */
background: #FFF;
color: #000;
}
You could also use the > child selector to just target top level <li>s:
ol#selections > li
{
color: blue;
}
I believe what you want is
ul li {color:blue}
ul li li {color:white;}
just change the second color
I want to build CSS drop down menus.
I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL.
If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I put that UL in a DIV. So how can I do it?
CSS Code:
li{
list-style: none;
float: left;
}
li ul {
display: none;
background-color: #69f;
}
li:hover > div#mDiv {
display: block;
}
.menuDiv{
display: none;
}
li:hover > ul {
display: block;
}
Markup:
<ul>
<li>Heading 1</li>
<li>Heading 2
<div class = "menuDiv" id = "mDiv">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</li>
<li>Heading 3
<ul>
<li>Subitem 4</li>
<li>Subitem 5</li>
<li>Subitem 6</li>
</ul>
</li>
</ul>
Get rid of the > combinator so the inner uls get picked up whether they're in a containing div or not:
li:hover ul {
display: block;
}
If the > in your rules is required change this rule:
li:hover > div ul, li:hover > ul {
display: block;
}
Your problem is that because of your css, the div is shown on :hover, but the inner ul is not.
So you can use #BoltClock's solution or change:
li ul {
display: none;
background-color: #69f;
}
to:
li ul {
background-color: #69f;
}
li > ul {
display: none;
}