how to create a hover effect for Div class and ID inside the class

Question

I am trying to create next/prev button similar to flexslider default button.

But I want to do that using div and classes.

Fiddle is here

My mark up is shown below:

<div class="dirnav">
    <div id="next"> Next </div>
    <div id="prev" > Prev </div>
</div>

1. Default, the arrows must be invisible.
2. When hover the .dirnav the arrows must come inside from left and right.

How can I do this ?

[EDIT: JSFIDDLE LINK UPDATED]

Answer 1

Add this code for elements

.dirnav {overflow: hidden;}
#next {margin-left: -30px;}
#prev {margin-right: -30px;}
.dirnav:hover #prev,
.dirnav:hover #next{margin: 0;}