How to hover one element in ul list and other elements dissapear?

Question

Desired Result: On hover, an element of my ul list should pop out while other elements become invisible.
Result: On hover, all elements become invisible.

ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 20px;
  color: white;
  background-color: rgb(207, 178, 183);
}

ul li a {
  padding: 20px 30px;
  background-color: blue;
  z-index: 1;
}

ul li a:hover {
  transform: scale(1.5);
  background-color: purple;
  z-index: 1000;
}

ul:hover li a {
  opacity: 0;
}

<ul>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
</ul>

How do you know the one that appear when they all have same text content? — Wasiu, Apr 27 '22 at 04:43
The last two rules of your CSS have the same specificity and ul li a:hover{ /*needs*/ opacity:1; } but with your current html everything disappears while over the UL until you get to the link - after swapping last two rules and adding opacity;1. Could make the a tags siblings and use the sibling selector ... https://stackoverflow.com/questions/11813465/css-sibling-selectors-select-all-siblings — Wayne, Apr 27 '22 at 05:01
Am I to understand you don't want to use javascript because you did not include that as a tag? — Wayne, Apr 27 '22 at 05:03
Whoops! thanks for correction @temaniafif - of course it is! — A Haworth, Apr 27 '22 at 10:02

Zach Jensz · Answer 1 · 2022-04-27T05:25:55.837

1

You're not making the currently hovered element opaque:

ul li a:hover {
  opacity: 1;
}

ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 20px;
  color: white;
  background-color: rgb(207, 178, 183);
}

ul li a {
  padding: 20px 30px;
  background-color: blue;
  z-index: 1;
}

ul:hover li a {
  opacity: 0;
}

ul li a:hover {
  transform: scale(1.5);
  background-color: purple;
  z-index: 1000;
  opacity: 1;
}

<ul>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
</ul>

edited Apr 27 '22 at 05:25

answered Apr 27 '22 at 05:10

Zach Jensz

3,650
5
15
30

1

Is there a bit of a problem with this in that as soon as the user hovers on anywhere in the ul but outside an inner element the whole thing disappears so you are sort of guessing as to which one you might hover over as you move the cursor. – A Haworth Apr 27 '22 at 08:32

score 1 · Answer 2 · answered Apr 27 '22 at 09:56

Update your code like below:

ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  font-size: 20px;
  color: white;
  background-color: rgb(207, 178, 183);
}
ul {
  pointer-events: none; /* added */
}
ul li a {
  padding: 20px 30px;
  background-color: blue;
  pointer-events: initial; /* added */
}

ul:hover li a {
  opacity: 0;
}

ul li a:hover {
  transform: scale(1.5);
  background-color: purple;
  opacity: 1; /* added */
}

<ul>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
  <li><a>Home</a></li>
</ul>

How to hover one element in ul list and other elements dissapear?

2 Answers2