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

Question

我正在尝试创建类似于 flexslider 默认按钮的下一个/上一个按钮。

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

小提琴在这里

我的标记如下所示：

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

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

我怎样才能做到这一点 ？

[编辑：JSFIDDLE 链接已更新]

Answer 1

为元素添加此代码

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