javascript - 悬停时更改元素时的动画

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>

所应用的转换是相对于网格的绝对，如果按钮数量增加，则需要更改。

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