How to make a transition start when hovering another div?

Problem

I am pretty new to coding...

<div class="box">
<a href="#">Click Here</a>
<div class="slide"></div>
</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?

http://jsfiddle.net/nntTn/

Any help is appreciated. Thanks!

Problem courtesy of: user3330820

Solution

Working Fiddle http://jsfiddle.net/nntTn/2/

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

Discussion

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.