I have a list item with an anchor tag inside.
I want to add the hover pseudo selector to a list item and therefore the anchor tag inside it.
My goal is to change the colour of the anchor tag text when hovering over the list item.
li:hover{
background-color: #000;
color:#fff;
width: 60px;
color:#fff;
}
<li>
one
</li>
JSFIDDLE
It dosn't seem to work though, what am I doing wrong here?
The selector that you're looking for is
li:hover a {
/* hover color here */
}
DEMO
a {
color: green;
}
li:hover a {
color: red;
}
<ul>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
<li>
four
</li>
<li>
five
</li>
</ul>
Related
In my <ul> list I have several <li> with <a> tags in them.
I want to change the color of the li bullet icons when hovering on the <a> tag (I mean bullets beside <li>)
I tried
a:hover {
color:red;
}
but it doesn't affect the<li> bullet icon.
I also tried
ul li:hover{
color:red;
}
But it doesn't work perfectly because when mouse move to near <a> tag and not on it <li> and the bullets starts to change color.
your code actually worked for me.
<ul>
<li>
A
</li>
<li>
B
</li>
<li>
C
</li>
</ul>
CSS:
ul li:hover{
color:red;
}
Fiddle: https://jsfiddle.net/tox9je8n/
I have tried something related to your question and it works fine. To fix the issue of li:hover not hovering link, you should set to display:block, as below, so that it takes full width.
ul li a {
color: black;
display: block
}
ul li:hover {
color: red;
}
ul li:hover a {
color: black;
}
<ul>
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
Good day all.
I have a problem, a structure like this:
<ul>
<li>
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li class="selected">
<span><span>
</li>
<li>
<span><span>
</li>
</ul>
I would like to select the first and last that have selected on the parent... the pseudo code should be like this:
li.selected span { background: #FF4D6E; color: white; }
li.selected:first-child span{border-radius:30px;}
li.selected:last-child span{border-radius:30px;}
the problem is that the span is inside the collection of .selected so I would like to have the first .selected, and its span
That is not possible because .selected class element is not the first of its parent. But you can do a workaround here by using sibling selectors as shown below:
/* first child */
li.selected span{
border-radius: 30px;
}
/* middle children */
li.selected + li.selected span{
border-radius: 0px;
}
/* last child */
li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Above code is assuming you have only three .selected elements. If you have more and you know the count then change the last child code in the above with respect to the count. For example, if you have four .selected elements.
li.selected ~ li.selected ~ li.selected ~ li.selected span {
border-radius: 30px;
}
Example Fiddle
If you are using jQuery then do this:
$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff");
$("li.selected:first-child span").css("border-radius" : "30px");
$("li.selected:last-child span").css("border-radius" : "30px");
To do this, I recommend taking a few hours to learn jquery. Here is a link to a good jquery tutorial. You can finish this tutorial in about three hours.
Jquery allows you to dynamically select any element that you want and modify it in pretty much any way you can imagine.
This is the code I would use to modify the CSS of the first and last span elements with .selected parents:
var $childOfSelected = $('.selected').children('span')
$childOfSelected.last().css({'border-radius':'30px'});
$childOfSelected.first().css({'border-radius':'30px'});
For the first child you can use this
li.selected span {
background: #FF4D6E;
color: white;
}
.selected:first-child,
:not(.selected) + .selected span {
border-radius: 30px;
}
<ul>
<li>
<span>not</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li class="selected">
<span>selected</span>
</li>
<li>
<span>not</span>
</li>
</ul>
I'm having black text appear instead of the colored text I expect to appear. I'm using Chrome as my browser. Here's the line that isn't working:
<ul class="line-legend">
<li>
<span style="background-color:rgba(220,0,0,1)">
</span>
one
</li>
<li>
<span style="background-color:rgba(0,0,220,1)">
</span>
two
</li>
</ul>
Here's how it appears:
onetwo
I'm very new to HTML.
Thank you.
Your text isn't inside the span, a nice identation should help you to identify when something like that happens.
Change it to the following:
<ul class="line-legend">
<li>
<span style="background-color: rgba(220,0,0,1)">one</span>
</li>
<li>
<span style="background-color:rgba(0,0,220,1)">two</span>
</li>
</ul>
Use this write your text in inside span
<ul class="line-legend"><li><span style="background-color:rgba(220,0,0,1); ">one</span></li><li><span style="background-color:rgba(0,0,220,1)">two</span></li></ul>
DEMO
it looks like you are using span so that you want different color for list style and text color so can use this solution for that
you can use pseudo css for styling the list styles which will not effect the li styles and you can give any style for the li like i have done
i have changed my list style color to green and background for li in different color
JS Fiddle
ul.line-legend {
list-style: none;
}
.line-legend li {
position: relative;
}
.line-legend li:before {
content: "\2022";
color: green;
font-size: 18px;
top: 0;
position: absolute;
left: -19px
}
.red {
background: red;
}
.blue {
background: blue;
}
<ul class="line-legend">
<li class="red">one</li>
<li class="blue">two</li>
</ul>
I have created a drop down menu however i have an issue with some of the sub menu items inheriting the CSS of the parent menu item.
In particualr, the sub menu items are inheriting the blue border of the parent, and the light blue background colour when hovering over the sub menu item.
I have added a red border, and can see that, but the blue still appears, also, i have added a 'red' hover class but this is not being triggered.
Here is my fiddle: http://jsfiddle.net/oampz/W2zrn/
HTML:
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<ul id="main-nav">
<li class="menu-nav--home">
</li>
<li id="nav-dropdown" class="drop-down"> <a>Link 1</a>
<ul class="visuallyhidden">
<li>
Link Two Sub One
</li>
<li>
Link Two Sub Two
</li>
<li>
Link Two Sub Three
</li>
</ul>
</li>
<li><a>Link 2</a>
</li>
</ul>
</ul>
</nav>
To remove the sub menu items inhering the blue border of the parent, change this
.menu-nav li li a, .menu-nav a {
border-right: 1px solid #0d63ba;
}
to
.menu-nav > li a {
border-right: 1px solid #0d63ba;
}
What this does is apply the blue border only to the anchor tags of the immediate child elements(li items) of the ul menu-nav.
For the red background hover to happen change this
.drop-down ul li:hover {
background-color: red;
}
to
.drop-down ul li:hover a {
background-color: red;
}
check out this i have updated your fiddle
http://jsfiddle.net/W2zrn/5/
added small code
#nav-dropdown li a {
border: medium none;
padding: 0 0 0 10%;
width:100%;
}
#nav-dropdown li {
width: 100%;
border: none;
}
I'm trying to show a nested (sub) list, but hide the parent ULs and LIs through an "active" class so that the sub list looks like the parent list.
The list with the "active" class isn't visible because it inherits display: none from its parent.
Code:
<ul>
<li>
Hidden
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
CSS:
li {
display: none;
}
li.active {
display: block;
}
Fiddle: http://jsfiddle.net/2C8qs
Any ideas?
If you can add span around the hidden text (http://jsfiddle.net/vittore/2C8qs/3/) :
<ul>
<li>
<span>Hidden</span>
<ul>
<li class="active">Visible</li>
</ul>
</li>
</ul>
li span, li li {
display: none;
}
li li.active {
display: block;
}
display: none hides the element and all of its children, that is final and adding display: block to a child won't make it visible again.
This will hide all children, except for the .active element:
ul.parent > li {
display: none;
}
ul.parent > li.active {
display: block;
}
EDIT: Oops, I misread the question. You can do something similar to the above though, if you wrap the other contents in an element.
An ugly CSS trick : http://jsfiddle.net/2C8qs/4/
Instead of using display none/block, I used text-indent, like that :
li {
text-indent: -99999em
}
li.active {
text-indent: 0
}
Note that can only work on inline / text elements.
I know this is very late to this question, but I've found what I would consider a nice solution and thought I'd post it here for whoever might need it in the future.
First of all, wrap all the <li>'s children with <p> (or <div> or anything, it doesn't matter really), but not any sub-<ul>'s. Then, to the child <ul> you want to be visible, add a class called showing. Example (we only want to show the SubSubThing list):
<ul>
<li>
<p>Item</p>
<ul>
<li>
<p>SubItem</p>
<ul>
<li>
<p>SubSubItem</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<p>Thing</p>
<ul>
<li>
<p>SubThing</p>
<ul class="showing">
<li>
<p>SubSubThing1</p>
</li>
<li>
<p>SubSubThing2</p>
</li>
<li>
<p>SubSubThing3</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Then apply this CSS:
ul>li {
list-style:none;
}
ul>li>p {
display: none;
}
ul.showing>li>p {
display:block;
}
/* Without removing padding and margin,
the sublists appear way over to the right */
ul {
margin-left: 0px;
padding-left: 0px;
}
li {
margin-left: 0px;
padding-left: 0px;
}
Now, only the <li>'s who are direct descendants of ul's with a showing class will display at all. The other items in the list will use no space.
To get the sublists to show bullet points would be easy via CSS, and to show different sublists it is simple to just use jQuery to set showing on the appropriate ul.
Hope that helps.
Obligatory JSFiddle
So the reason you can't simply hide the first li and reveal the second is because the second is contained by the first — you can't reveal and element that is contained by a hidden one.
Therefore, if you put the li element within a span that you'd like to hide, it becomes easy. I've created a class-free version for you here: http://jsfiddle.net/rgpnr6mh/3/
<ul>
<li><span>Hidden</span>
<ul>
<li>Visible</li>
</ul>
</li>
</ul>
I'm assuming you don't want to display the bullets:
ul {
list-style-type:none
}
li span{
display: none;
}
li li {
display: block;
}