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 具有流动效果。