How do I activate a CSS animation on an element by hovering over a different element?

Question

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>

Answer 1

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>