html - CSS Translate 即使使用 inline-block 也会恢复 Hover Off

Question

我正在开发 Rails 5 应用程序:

1. Bootstrap(使用 jQuery)
2. SASS
3. 波本威士忌

.align-middle {
  vertical-align: middle !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-center {
  text-align: center !important;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.domain-info-group {
  display: inline-block;
  width: 6.5em;
  height: 6.5em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
}

.domain-cluster {
  width: 50em;
  height: 50em;
  position: absolute;
  top: 30%;
  left: 30%;
  -webkit-transform: translate(-30%, -30%);
  transform: translate(-30%, -30%);
}

.domain-name {
  opacity: 0;
}

.domain-circle {
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-size: 4em;
  transition: box-shadow 0.3s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(1) {
  -webkit-transform: translate(0);
  transform: translate(0);
  transition: all 1s ease 0.1s;
}

.domain-cluster:hover .domain-info-group:nth-child(1) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(1) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(2) {
  -webkit-transform: translate(-10em, 0em);
  transform: translate(-10em, 0em);
  transition: all 1s ease 0.2s;
}

.domain-cluster:hover .domain-info-group:nth-child(2) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(2) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(3) {
  -webkit-transform: translate(10em, 0em);
  transform: translate(10em, 0em);
  transition: all 1s ease 0.3s;
}

.domain-cluster:hover .domain-info-group:nth-child(3) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(3) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(4) {
  -webkit-transform: translate(0em, -10em);
  transform: translate(0em, -10em);
  transition: all 1s ease 0.4s;
}

.domain-cluster:hover .domain-info-group:nth-child(4) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(4) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(5) {
  -webkit-transform: translate(0em, 10em);
  transform: translate(0em, 10em);
  transition: all 1s ease 0.5s;
}

.domain-cluster:hover .domain-info-group:nth-child(5) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(5) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(6) {
  -webkit-transform: translate(-7.5em, -7.5em);
  transform: translate(-7.5em, -7.5em);
  transition: all 1s ease 0.6s;
}

.domain-cluster:hover .domain-info-group:nth-child(6) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(6) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(7) {
  -webkit-transform: translate(7.5em, -7.5em);
  transform: translate(7.5em, -7.5em);
  transition: all 1s ease 0.7s;
}

.domain-cluster:hover .domain-info-group:nth-child(7) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(7) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(8) {
  -webkit-transform: translate(7.5em, 7.5em);
  transform: translate(7.5em, 7.5em);
  transition: all 1s ease 0.8s;
}

.domain-cluster:hover .domain-info-group:nth-child(8) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(8) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.domain-cluster:hover .domain-info-group:nth-child(9) {
  -webkit-transform: translate(-7.5em, 7.5em);
  transform: translate(-7.5em, 7.5em);
  transition: all 1s ease 0.9s;
}

.domain-cluster:hover .domain-info-group:nth-child(9) .domain-name {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.domain-cluster:hover .domain-info-group:nth-child(9) .domain-circle {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

<div class="domain-cluster">
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="2">
      Pe
    </div>
    <div class="domain-name text-muted">
      Personal
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="3">
      Fa
    </div>
    <div class="domain-name text-muted">
      Family
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="4">
      Wo
    </div>
    <div class="domain-name text-muted">
      Work
    </div>
  </div>
  <div class="domain-info-group text-center">
    <div class="domain-circle badge-info text-center align-middle" data-value="5">
      Sp
    </div>
    <div class="domain-name text-muted">
      Spiritual
    </div>
  </div>
</div>

我正在这样做https://jsfiddle.net/stoicAlchemist/4ptz0wvn/而且，正如您所看到的，悬停时的转换工作正常，但当悬停关闭时，它只是弹回到原始位置。我一直在寻找类似的问题，但似乎找不到足够接近的问题来解释我的困惑，我什至尝试了 display 属性上的 inline-block它不起作用，它一定是一些愚蠢的东西，而我没有看到它。有人知道为什么翻译回来不能与转换一起使用吗？

Answer 1

这取决于您悬停的位置。如果您将 body 标记或最外层包装器设置为 position:absolute;height:100%;width:100% 以及 body:hover .domain-cluster 。 domain-info-group:nth-child(n) .domain-circle 动画保持不变，直到鼠标离开浏览器窗口。离开浏览器后，CSS 别无选择，只能恢复到其原始状态，因为 :hover 状态只是暂时的，正如名称所暗示的那样(您不再悬停)。与 :active 和 :focus 相同，一旦鼠标离开浏览器，它们就不会知道任何内容的上下文。没有数据绑定(bind)到 DOM。

您可以通过在其中一个动画上使用某种动画延迟，仅使用 CSS 来实现此效果，例如将其设置为超高值，在鼠标重新进入窗口之前不会过期。但是，在鼠标离开窗口后，添加一两行 JS 向元素添加某种 .blur 类会更简单(这反过来可能会否定继承的样式，这些样式会迫使您的动画回到原来的样式)状态)