悬停时更改元素时的动画

Question

我做了 3 个按钮来切换服务器，但我想制作动画，所以如果我将光标悬停在另一台服务器上，服务器名称的红色背景将移动到另一个服务器。我不知道该怎么做，所以如果你建议我，那就太棒了！ 以下是带有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，如果按钮数量增加，则需要进行更改。

基本上，我已将所有按钮放在一个列表项中(您可以使用divs尝试(并将transform应用于这些列表项。这样，悬停时按钮似乎具有流动效果。