如何为类中的Div类和ID创建悬停效果

Question

我正在尝试创建类似于flexslider默认按钮的next / prev按钮。

但我想用div和类来做到这一点。

Fiddle is here

我的标记如下所示：

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

1. 默认情况下，箭头必须是不可见的。
2. 当悬停.dirnav时，箭头必须从左侧进入并且 右。

我该怎么做？

[编辑：JSFIDDLE LINK UPDATED]

Answer 1

为元素添加此代码

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