如何通过将鼠标悬停在不同元素上来激活元素上的 CSS 动画？答案

【问题标题】：How do I activate a CSS animation on an element by hovering over a different element?如何通过将鼠标悬停在不同元素上来激活元素上的 CSS 动画？
【发布时间】：2016-02-16 23:23:33
【问题描述】：

我已经找到了一些不同的解决方案，但它们都依赖于其中一个元素位于另一个元素中，而我的问题中没有这个。

我做了一点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>

【问题讨论】：

是的，这就是问题哈哈。有什么办法可以让我更清楚我想要什么？
我已将您的代码块转换为 sn-p。这不是强制性的，但我这样做是为了向您展示 sn-p 的工作原理。在工具栏中，只需单击 <> 按钮并将代码粘贴到相关框中，就像在 Fiddle 中一样。这有助于将演示直接添加到问题中，从而避免创建小提琴所涉及的额外工作。

标签： html css css-selectors css-animations

【解决方案1】：

在 CSS 中，只有当用作参考的元素（执行操作的元素）位于需要在DOM。因此，将a.moveme 元素移动到a.hoverme 元素之后，并使用a.hoverme:hover + a.moveme 选择器应用动画。

+ 选择器被称为相邻兄弟选择器，它用于选择紧跟在引用元素之后的下一个兄弟（在我们的例子中是 a.hoverme）。

注意：我已将a.moveme 的初始不透明度更改为0，以便它仅在a.hoverme 元素悬停时才可见，并且还将animation-fill-mode 设置为@ 987654329@ 以便a.moveme 元素在悬停时保持在其最终位置可见。

我还包含了无前缀库，以避免浏览器前缀并使 sn-p 在所有浏览器中都可见。

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>

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

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>

【讨论】：

嗯，好吧，你是说如果它在“hover me”的左边就没有办法移动它了？ Javascript有什么办法吗？非常感谢您的宝贵时间。
@Egrodo：不，在页面上我们可以让它出现在悬停我的左侧，但在 HTML 中，元素不能在悬停我之前出现。我现在正在通过电话访问。将在早上添加我的意思的示例。应该只用 CSS 就可以了。
我添加了一个答案，以便我可以更新 Harry 的 sn-p 以在右侧显示“悬停我” - 正如他已经说过的，您可以定位它（浮动、位置、边距、填充等.) 不管你想要什么，它只需要在 html 文档顺序中的“移动我”元素之前。我的更新只是将 float:left 更改为 float:right 以进行演示。

【解决方案2】：

@Harry 的 sn-p 稍作调整：

div.txtarea {
  background-color: gray;
  width: 100%;
  height: 5em;
  position: fixed;
  text-align: center;
}
a.hoverme {
  float: right;
  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>

如果您想要右侧的“悬停我”，只需将其更改为 float:right 而不是 float:left.

【讨论】：