将光标悬停在图像上后，箭头必须出现在左侧和右侧

Question

我有自动移动图像作为幻灯片。

这是我在CodePen中的代码：https://codepen.io/Krzysiek_39/pen/poNLbgx

我希望左箭头和右箭头只在将光标悬停在图像上之后出现(作为"光标：默认"(。当默认光标位于图像后面时，两个箭头将不可见。

下面是一个完美的例子，说明了这应该是什么样子：https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/

你知道怎么做吗？

我将非常感谢你的有效帮助。

<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>

</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>

</div>

<div class="box">
<div class="slider_wrapper">

<div class="slider">

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
</div>

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
</div>

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
</div>

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
</div>

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
</div>

<div class="slider_img_wrapper">
<a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
</div>

</div>

<div class="slider_objects">

<div class="slider_btn prev_btn"><i class="fas fa-chevron-left"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right"></i></div>

<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>

</div>

</div>

</div>

Answer 1

尝试在slider类上添加:hover。

.slider_btn {
opacity: 0;
}
.slider:hover + .slider_objects .slider_btn {
opacity: 1;
}