如何通过将鼠标悬停在其他元素上来激活元素上的CSS动画？

Question

我已经找到了一些不同的解决方案,但它们都依赖于其他元素中的一个元素,我不能在我的问题中有这个.

我做了一个类似我的问题的JSFiddle.当有人徘徊"徘徊我!" 我想要"感动我!" 走向"徘徊我!" 并且也变得可见.我已经设法让这个工作,只要"徘徊我!" 也随着"移动我!"向右移动 但我不希望这种情况发生,我想要"徘徊我!" 留在同一个地方.

回顾一下,"徘徊在我身边!" 我想要"感动我!" 变得可见并向右移动"向我徘徊!" 在同一条线上没有移动"悬停我!" 一点都不

非常感谢帮助!

div.txtarea {
  background-color: gray;
  width: 100%;
  height: 5em;
  position: fixed;
  text-align: center;
}
a.hoverme {
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
}
a.moveme {
  float: left;
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
  opacity: 1;  /*THIS IS USUALLY 0 BUT I MADE IT 1 SO WE COULD SEE IT*/
}
a.hoverme:hover > a.moveme {
  -webkit-animation: scrollingIn 1.5s linear;
}
@-webkit-keyframes scrollingIn {
  0% {
    margin-left: 0em;
    opacity: 0;
  }
  50% {
    margin-left: 1em;
    opacity: .5;
  }
  100% {
    margin-left: 2em;
    opacity: 1;
  }
}

<div class="txtarea">
  <a class="moveme" href="#">
        move me!
      </a>
  <a class="hoverme" href="#">
        hover me!
      </a>
</div>

Answer 1

在CSS中,只有当用作引用的元素(执行操作的元素)位于需要在DOM中设置样式的元素之前时,才能基于对另一个元素的操作影响一个元素的属性.因此,将a.moveme元素移动到元素后面a.hoverme并使用a.hoverme:hover + a.moveme选择器应用动画.

该+选择器被称为相邻的兄弟选择器和它被用于选择随后的参考元件(在我们的情况下,是直接下一个同级a.hoverme).

注意:我已将a.moveme0 的初始不透明度更改为0,以便仅在a.hoverme元素悬停时才可见,并且还设置了animation-fill-modeto,forwards以便a.moveme只要悬停处于打开状态,元素在其最终位置保持可见.

我还包括前缀免费库,以避免浏览器前缀,并使所有浏览器中的代码段都可见.

div.txtarea {
  background-color: gray;
  width: 100%;
  height: 5em;
  position: fixed;
  text-align: center;
}
a.hoverme {
  float: left;
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
}
a.moveme {
  float: left;
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
  opacity: 0;
}
a.hoverme:hover + a.moveme {
  animation: scrollingIn 1.5s linear forwards;
}
@keyframes scrollingIn {
  0% {
    margin-left: 0em;
    opacity: 0;
  }
  50% {
    margin-left: 1em;
    opacity: .5;
  }
  100% {
    margin-left: 2em;
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="txtarea">
  <a class="hoverme" href="#">
    hover me!
  </a>
  <a class="moveme" href="#">
    move me!
  </a>
</div>

对于这种特殊效果,您甚至不需要动画.这可以使用转换来实现,如下面的代码段所示.transition在a.hoverme:hover + a.moveme选择器中定义属性意味着转换仅在悬停时发生,而不是在悬停时发生.在悬停时,元素就会消失.我这样做是为了模仿动画产生的输出.

div.txtarea {
  background-color: gray;
  width: 100%;
  height: 5em;
  position: fixed;
  text-align: center;
}
a.hoverme {
  float: left;
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
}
a.moveme {
  float: left;
  text-decoration: none;
  color: blue;
  font-size: 3em;
  display: inline-block;
  opacity: 0;
}
a.hoverme:hover + a.moveme {
  margin-left: 2em;
  opacity: 1;
  transition: all 1.5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="txtarea">
  <a class="hoverme" href="#">
    hover me!
  </a>
  <a class="moveme" href="#">
    move me!
  </a>
</div>