悬停改变元素时的动画

Question

我做了3个按钮来切换服务器，但我想做动画，所以如果我把光标悬停在另一个服务器上，红色背景的服务器名称将移动到另一个。我不知道如何做到这一点，所以如果你能给我建议的话，那就太好了！这里是HTML与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

我实现了所需的效果，使用 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(s)和应用 transform 到这些列表项。这样一来，这些按钮似乎有 流动 悬停时的效果。