如何通过将鼠标悬停在不同元素上来激活元素上的 CSS 动画? [英] How do I activate a CSS animation on an element by hovering over a different element?

查看：30
本文介绍了如何通过将鼠标悬停在不同元素上来激活元素上的 CSS 动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我做了一些 JSFiddle 应该类似于我的问题.当有人悬停时悬停我！"我要动我！"走向悬停我！"并且变得可见.只要悬停我！"，我就设法让它发挥作用.也随着move me!"向右移动.但我不希望这种情况发生，我想要悬停我！"留在同一个地方.

要查看，悬停时悬停我！"我要动我！"变得可见并向右移动悬停我！"在同一条线上没有移动悬停我！"根本.

非常感谢您的帮助！

div.txtarea {背景颜色:灰色；宽度:100%；高度:5em；位置:固定；文本对齐:居中；}a.悬停{文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；}a.移动{向左飘浮;文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；不透明度:1；/*这通常是 0，但我把它变成了 1，所以我们可以看到它*/}a.hoverme:hover >a.移动{-webkit-animation:滚动1.5s线性；}@-webkit-keyframes scrollingIn {0% {左边距:0em；不透明度:0；}50%{左边距:1em；不透明度:0.5；}100% {左边距:2em；不透明度:1；}}

<a class="moveme" href="#">动我！</a><a class="hoverme" href="#">悬停我！</a>

解决方案

在 CSS 中，您可以基于对另一个元素的操作来影响一个元素的属性，前提是该元素被用作引用(操作的元素)执行)在需要在 DOM 中设置样式的元素之前.因此，将 a.moveme 元素移动到 a.hoverme 元素之后，并使用 a.hoverme:hover + a.moveme 选择器应用动画.

+ 选择器被称为相邻同级选择器，它用于选择紧跟在引用元素之后的下一个同级选择器(在我们的例子中，是 a.hoverme).

注意:我已将 a.moveme 的初始不透明度更改为 0，以便它仅在 a.hoverme元素悬停在上面，并将 animation-fill-mode 设置为 forwards，以便 a.moveme 元素在其最终位置保持可见只要悬停处于开启状态.

我还包含了前缀免费库，以避免浏览器前缀并使代码段在所有浏览器中都可见.

div.txtarea {背景颜色:灰色；宽度:100%；高度:5em；位置:固定；文本对齐:居中；}a.悬停{向左飘浮;文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；}a.移动{向左飘浮;文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；不透明度:0；}a.hoverme:hover + a.moveme {动画:滚动 1.5 秒线性向前；}@keyframes 滚动{0% {左边距:0em；不透明度:0；}50%{左边距:1em；不透明度:0.5；}100% {左边距:2em；不透明度:1；}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class="txtarea"><a class="hoverme" href="#">悬停我！</a><a class="moveme" href="#">动我！</a>

<小时>

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

div.txtarea {背景颜色:灰色；宽度:100%；高度:5em；位置:固定；文本对齐:居中；}a.悬停{向左飘浮;文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；}a.移动{向左飘浮;文字装饰:无；颜色:蓝色；字体大小:3em；显示:内联块；不透明度:0；}a.hoverme:hover + a.moveme {左边距:2em；不透明度:1；过渡:全1.5s线性；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class="txtarea"><a class="hoverme" href="#">悬停我！</a><a class="moveme" href="#">动我！</a>

I've found a few different solutions to this but they all rely on one of the elements being inside the other element, and I can't have that in my problem.

I've made a little JSFiddle that should resemble my problem. When someone hovers "hover me!" I want "move me!" to move toward "hover me!" and also become visible. I've managed to get this to work provided that "hover me!" also moves to the right along with "move me!" but I don't want that to happen, I want "hover me!" to stay in the same spot.

To review, upon hovering "hover me!" I want "move me!" to become visible and move to the right towards "hover me!" on the same line without moving "hover me!" at all.

Help would be much appreciated!

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>

解决方案

In CSS you can affect the properties of one element based on the action on another element only if the element that is used as reference (the one on which the action is performed) is before the element that needs to be styled in the DOM. So, move your a.moveme element to be after the a.hoverme element and use the a.hoverme:hover + a.moveme selector to apply the animation.

The + selector is called as adjacent sibling selector and it is used to select the immediate next sibling that follows the reference element (which in our case, is a.hoverme).

Note: I have changed the initial opacity of the a.moveme to 0 so that it becomes visible only when the a.hoverme element is hovered on and have also set the animation-fill-mode to forwards so that the a.moveme element stays visible in its final position as long as the hover is on.

I have also included prefix free library in-order to avoid the browser prefixes and to make the snippet viewable in all browsers.

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>

For this particular effect, you don't even need animations. This can be achieved using transitions also like in the below snippet. Defining the transition property within the a.hoverme:hover + a.moveme selector would mean that the transition happens only while hovering in and not while hovering out. On hover out, the element simply disappears. I've done this to mimick the output produced by animations.

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>

这篇关于如何通过将鼠标悬停在不同元素上来激活元素上的 CSS 动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆