CODEWITHSUNDEEP
htmlcss
cometta
cometta

Reputation: 35689

css hover over li, blur all others

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

Can anyone tell me if it's possible to use css to blur the ul elements containing a,d,e when the user moves their mouse over the element containing c, without using JavaScript?

Upvotes: 2

Views: 14805

Answers (6)

Mustafa AHCI
Mustafa AHCI

Reputation: 215

I encountered a slight issue* in my CSS implementation. Initially, when I hovered over the ul element, but not directly over any li element (which might include padding or grid type of display with empty areas), all li elements were getting blurred. This was not what I wanted. My goal was to blur all other li elements only when a li element is hovered over, not when hovering over the ul element itself.

To fix this, I adjusted my CSS like so:

ul:has(li:hover) li:not(:hover) {
  opacity: 0.5;
}
<ul>
  <li>Aa</li>
  <li>Bb</li>
  <li>Cc</li>
  <li>Dd</li>
  <li>Ee</li>
</ul>

Upvotes: 0

susmita rauth
susmita rauth

Reputation: 141

ul:hover li:not(:hover) {
    filter: blur(3px);
}

Upvotes: 0

Sithum Ravishka
Sithum Ravishka

Reputation: 1

<!DOCTYPE html>
<html>
  <body>
    <style>
      ul li {
        margin: 2px; /* Adds 2px of margin around each list item */
      }
    
      ul:hover li {
        opacity: .5; /* Reduces the opacity to 0.5 when the list is hovered */
      }

      ul li:hover {
        opacity: 1; /* Restores the opacity to 1 when an individual list item is hovered */
      }
    </style>

    <!-- Start of the unordered list -->
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
    </ul>
    <!-- End of the unordered list -->

  </body>
</html>

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240968

As opposed to using multiple selectors, you can combine them into one using the :not selector.

ul:hover li:not(:hover) {
    opacity: .5;
}

Which will set opacity:.5 on all the li, exept the one being hovered over.

jsFiddle here

Upvotes: 7

RoToRa
RoToRa

Reputation: 38420

Do you mean something like this:

http://jsfiddle.net/S4TMS/

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

CSS

ul li {
    background-color: red;
    margin: 2px;
}

ul:hover li {
    opacity: .5;
}

ul li:hover {
    opacity: 1;
}

Upvotes: 16

cdhowie
cdhowie

Reputation: 169038

You could try something like this, which is not supported in all browsers due to the text-shadow attribute:

ul:hover li {
    text-shadow: 0px 0px 3px black;
    color: transparent;
}

ul:hover li:hover {
    text-shadow: none;
    color: black;
}

EDIT: Added a link to a jsfiddle above, since that's apparently the cool thing that gets you votes. :P

Upvotes: 1

Related Questions