CODEWITHSUNDEEP
csshover
Ashley
Ashley

Reputation: 73

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

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>

Upvotes: 1

Views: 807

Answers (2)

Temani Afif
Temani Afif

Reputation: 273021

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>

Upvotes: 1

Zach Jensz
Zach Jensz

Reputation: 4078

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>

Upvotes: 1

Related Questions