How Do I Activate A Css Animation On An Element By Hovering Over A Different Element?

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 JSFidd

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="txtarea"><aclass="hoverme"href="#">
    hover me!
  </a><aclass="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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="txtarea"><aclass="hoverme"href="#">
    hover me!
  </a><aclass="moveme"href="#">
    move me!
  </a></div>

Solution 2:

@Harry 's snippet with a very slight tweak:

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><divclass="txtarea"><aclass="hoverme"href="#">
    hover me!
  </a><aclass="moveme"href="#">
    move me!
  </a></div>

If you want the 'hover me' on the right, you just have to change it to float:right instead of float:left.