我找到了一些不同的解决方案，但是它们都依赖于另一个元素内部的一个元素，而我无法解决这个问题。
我做了一些类似我的问题的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>在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 {
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句