Animation 更改 hover 上的元素時

Question

我做了 3 個按鈕來切換服務器，但我想讓 animation 所以如果我 hover 我在另一台服務器上的 cursor 服務器名稱的紅色背景將移動到另一個。 我不知道該怎么做，所以如果你建議我會很棒：這是帶有 CSS 的 HTML：

 .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

我使用grids 、 ul和li實現了所需的效果。 這是工作片段示例：

 .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>

應用的轉換是absolute相對於網格的，如果按鈕數量增加，則需要更改。

基本上，我已將所有按鈕放在一個列表項中（您可以嘗試使用div ）並將transform應用於這些列表項。 這樣，按鈕似乎對 hover 具有流動效果。