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.moveme的初始不透明度更改为0，以便仅在a.hoverme元素悬停时才会显示，并且还设置了{ {1}}至animation-fill-mode，以便只要悬停处于启用状态，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;
}

Answer 2

@Harry的片段略有调整：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如果你希望“徘徊在我身边”。在右侧，您只需将其更改为float:right而不是float:left.

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

2 个答案: