CODEWITHSUNDEEP
htmlcsscss-selectors
Gaius
Gaius

Reputation: 250

Select other li in CSS

When put my mouse on a li element, I want the change the opacity of the other li from the ul. Is that possible just with CSS (I'm using SASS) ? If I'm not on a li, all the li are opacity:1.

<ul>
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
    <li></li>  <= hover on this li //opacity 1
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
</ul>

Upvotes: 2

Views: 152

Answers (4)

Froggiz
Froggiz

Reputation: 683

as you are using sass, you can use specific syntax who will be interpreted when you create your generated css

ul 
{
&:hover
    {         
    li  {
        opacity: 1;             
        }
    }
li 
    {
    &:hover
        {
        opacity:0.5;
        }
     }
  }

once generated will become 

 ul:hover li {opacity: 0.5;}
 ul li:hover {opacity: 1;}

Upvotes: 1

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

This simple trick should do it:

ul:hover > li{
  opacity: .5;
}

ul:hover > li:hover{
  opacity: 1;
}
<ul>
    <li>1111</li> 
    <li>2222</li> 
    <li>3333</li> 
    <li>4444</li> 
    <li>5555</li> 
</ul>

Upvotes: 1

JJJ
JJJ

Reputation: 33163

The trick is to change the opacity of all items to 0.5 on ul:hover and opacity 1 on li:hover. The latter is more specific so it applies before the more general one.

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}
<ul>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
    <li> hover on this li //opacity 1 </li>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
</ul>

Upvotes: 2

Katpoes
Katpoes

Reputation: 209

/* The opacity when hovered. */
ul li {opacity: 1}

/* The opacity when the li is not hovered */
ul li:not(:hover) {opacity:0.5}

Upvotes: 2

Related Questions