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

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;
}