主页 / 问题 / 613139
Accepted
VaskM
Asked:2020-01-11 03:37:27 +0000 UTC2020-01-11 03:37:27 +0000 UTC

如何在css中进行这样的切换？

  • 772

您需要在 css+html 上编写这样的开关。指标应该跳跃 - 顶部的绿色条： 拨动开关

html

1 个回答

  1. Best Answer

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b {
  text-align: center;
}
.b-inner {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 0;
}
.b-item {
  margin: 10px;
  width: 100px;
  min-height: 150px;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #ccc;
  position: relative;
  font-size: 16px;
}
.b-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 70px;
  margin-left: -35px;
  height: 2px;
  background: #555;
}
.b-line {
  position: absolute;
  top: 10px;
  left: 25px;
  width: 70px;
  height: 4px;
  background: green;
  transition: 0.5s linear;
}
.b-item:nth-of-type(2):hover ~ .b-line {
  left: calc(100px + 45px);
}
.b-item:nth-of-type(3):hover ~ .b-line {
  left: calc(200px + 65px);
}
    <div class="b">
  <div class="b-inner">
    <div class="b-item">

    </div>
    <div class="b-item">

    </div>
    <div class="b-item">

    </div>
    <div class="b-line"></div>
  </div>
</div>

    示例小提琴

    • 4

相关问题