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

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

本文关键字:创建 ID 悬停 Div      更新时间:2023-09-26

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

但是我想用div和classes来实现。

小提琴在这里

我的标记如下所示:

<div class="dirnav">
    <div id="next"> Next </div>
    <div id="prev" > Prev </div>
</div>
  1. 默认情况下,箭头必须是不可见的。
  2. 当鼠标悬停.dirnav时,箭头必须从左边和里面进来对的。

我该怎么做呢?

[EDIT: JSFIDDLE LINK UPDATED]

为元素添加以下代码

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