Переводчик CSS снова включается при наведении курсора даже при использовании встроенного блока

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/ и, как вы можете видеть, преобразование при наведении работает нормально, но при включенном при наведениипросто возвращается в исходное положение.Я искал похожий вопрос, но не могу найти достаточно близкого вопроса, объясняющего мое замешательство, я даже попытался inline-block на свойстве display, и он не работает, он должен быть чем-то глупым иЯ этого не вижу.Кто-нибудь знает, почему перевод назад не работает с переходом?

Answer 1

Все, что сказал Охотник Фрейзер, дало мне понять, в чем здесь проблема.По-видимому, добавление :hover к селектору означает, что преобразование будет иметь место, когда оно наведено на него, но если это не так, преобразование не происходит, поэтому необходимо добавить преобразование «обратно в начало координат»,что я и сделал, добавив переход, чтобы он не просто "переводился в мгновение ока".Пожалуйста, проверьте оригинальную ссылку для jsfiddle, чтобы получить обновленную версию.

.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%);
  transition: all 1s ease-out 0.1s
}

.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 1.2s ease-in-out 0.1s;
}

.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>

Answer 2

Это зависит от того, от чего вы зависаете.Если вы установите тег body или крайнюю оболочку на position:absolute;height:100%;width:100% вместе с body:hover .domain-cluster .domain-info-group:nth-child(n) .domain-circle, анимация останется в такте, пока мышь не покинет окно браузера.После того, как он покидает браузер, у CSS не остается иного выбора, кроме как вернуться в исходное состояние, поскольку состояние: hover является только временным, как следует из названия (вы больше не зависаете).То же самое с: active и: focus, они ничего не знают о контексте чего-либо, когда мышь покидает браузер.Нет данных, привязанных к DOM.

Вы могли бы достичь этого эффекта, используя только CSS, используя некоторую задержку анимации для одной из ваших анимаций, например, установив для нее сверхвысокое значение, которое не истечетдо того, как мышь снова войдет в окно.Но было бы намного проще добавить строку или две JS, которые добавляют некоторый класс .blur к элементам, как только мышь покидает окно (что, в свою очередь, может свести на нет унаследованные стили, которые возвращают вашу анимацию к исходной.состояние)