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

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

Using javascript you can be a bit cleaner ... note I did not transition the to visible; don't know how you want to address that in your design.

/* note: this script goes at the bottom of page or under the id="menu"
or else it must be loaded after the page loads */

elements = document.querySelectorAll('#menu a')

elements.forEach(function(item) { 
   item.onmouseover = function() {
       items = document.querySelectorAll('#menu a:not(:hover)')
       items.forEach(function(item) {item.removeAttribute("visible")})
   }  
})

elements.forEach(function(item) { 
    item.onmouseout = function() {
        elements.forEach(function(item) {item.setAttribute("visible","true")})
    }  
})

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

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

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

#menu a:not([visible]) {
    opacity:0;
    transition: 1s;
}

<body>

   <ul id="menu">
       <li><a visible>Home</a></li>
       <li><a visible>Home</a></li>
       <li><a visible>Home</a></li>
       <li><a visible>Home</a></li>

   </ul>