我有这个垂直幻灯片可以通过向上/向下箭头导航。幻灯片的容器 div 中有 7 个项目(div),但一次只有 3 个可见。事实上,这个幻灯片是一个菜单——从可见的 3 个项目中,中间的一个是可点击的,它将在页面的其他地方加载 div 中的内容。
现在,由于有 3 个项目并且只有第 2 个项目(中间一个)是可点击的,我需要在它们之间创建一个差异。所以,我想像这样更改项目边框/边框半径:
问题是我不知道如何做到这一点,因为 div 在可见区域中不断改变位置。我在这里真的需要帮助。
HTML 标记:
<div id="rocksType_btns">
<div id="rocksType_btnUp"></div>
<div id="rocksType_btnDown"></div>
</div>
<div id="rocksType_subtypeSlider">
<div id="rocksType_DBitems_container">
<div id="rocksType_DB_1" class="rocksType_DBitem">Item 1</div>
<div id="rocksType_DB_2" class="rocksType_DBitem">Item 2</div>
<div id="rocksType_DB_3" class="rocksType_DBitem">Item 3</div>
<div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
<div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
<div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
<div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
</div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->
我已经为之前/当前/之后状态定义了 CSS 代码 - 只需要分配它们。
这是一个小提琴。
谢谢。
佩德罗