How to make a transition start when hovering another div?


I am pretty new to coding...

<div class="box">
<a href="#">Click Here</a>
<div class="slide"></div>

Here is my code. I am trying to get "slide" to start a transition when I hover over the entire"box". As it is now I have to hover over the actual div.

Here it is in jsfiddle. I've been using LESS, can you not use it in jsfiddle?

Any help is appreciated. Thanks!

Problem courtesy of: user3330820


Working Fiddle

You just had the wrong selector is all for this

So I changed this

.box .slide:hover {
  left: 262px;

to this

.box:hover .slide {
  left: 262px;

and it works great now.

Solution courtesy of: CRABOLO


On line 32 of your fiddle, change to:

.box:hover .slide {
Discussion courtesy of: user3256143

This recipe can be found in it's original form on Stack Over Flow.