Animation 更改 hover 上的元素时

Question

I made 3 buttons to toggle server but I want to make the animation so if I hover my cursor on another server red background of names of servers will move to another. I don't know how to do this so it will be awesome if you'll suggest me: Here is HTML with CSS:

 .serverchoosediv{ float: right; display: inline-block; height: 100%; align-items: center; display: flex; margin-right: 20px; font-family: arial; }.clickserver{ text-align: center; text-decoration: none; color: #8e8e8e; padding: 0 20px; font-size: 14px; display: inline-block; border-radius: 20px; height: 100%; }.clickserver:hover{ color: #fff; background-color: #ff3b3b; }.clickserver-inner{ align-items: center; display: flex; height: 100%; }.serverchoosedivcolored{ height: 70%; border-radius: 20px; background: #ebebeb; }

 <div class="serverchoosediv"> <div class="serverchoosedivcolored"> <div class="clickserver"> <div class="clickserver-inner"> <a>Casual</a> </div> </div> <div class="clickserver"> <div class="clickserver-inner"> <a>Training</a> </div> </div> <div class="clickserver"> <div class="clickserver-inner"> <a>Expert</a> </div> </div> </div> </div>

Answer 1

I achieved the required effect using grids , ul and li . Here is the working snippet example:

 .buttons{ float: right; overflow: hidden; border-radius: 20px; }.btn{ width: 80px; border: none; background: transparent; }.grid { display: inline-grid; grid-template-columns: auto auto auto; grid-gap: 0; overflow: hidden; list-style: none; position: relative; margin: 0; padding: 5px; height: auto; }.grid li { position: relative; }.grid li:hover ~ li:last-child:after, .grid li:last-child:hover:after, .grid li:hover ~ li:last-child:before, .grid li:last-child:hover:before { opacity: 1; transition: 1s ease; }.grid li:last-child:after, .grid li:last-child:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; opacity: 0; transition: opacity 1s, transform 1s 1s, background 1s; border: 0.5px solid #ff3b3b; border-radius: 10px; background: #ff3b3b; z-index: -1; }.grid li:nth-child(1):hover ~ li:last-child:after, .grid li:nth-child(1):hover ~ li:last-child:before { transform: translate(-200%, 0); }.grid li:nth-child(2):hover ~ li:last-child:after, .grid li:nth-child(2):hover ~ li:last-child:before { transform: translate(-100%, 0); }

 <div class='buttons'> <ul class="grid"> <li> <a href="#"> <button class="btn"> Casual </button> </a> </li> <li> <a href="#"> <button class="btn"> Training </button> </a> </li> <li> <a href="#"> <button class="btn"> Expert </button> </a> </li> </ul> </div>

The transformation applied is absolute relative to the grid and if the number of buttons are increased, it will need alteration.

Basically, I have placed all the buttons in a list item (you can try with div s) and applied transform to those list items. This way the buttons seem to have flowing effect upon hover.