html - 如何仅在悬停幻灯片时显示箭头

Question

如何修复仅当指针悬停在幻灯片上时才显示箭头的选项。就像您在 Facebook 上查看相册时所看到的一样。将鼠标离开幻灯片，意味着箭头将透明或隐藏。请检查以下内容以了解我的问题。

function slide(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}
	
window.setInterval(function slideA() {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if (imagecount > total)
        imagecount = 1;
    if (imagecount < 1)
        imagecount = total;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}, 5000);
	
function selectSlide(slideNumber){
    var Image = document.getElementById('img');
    imagecount = slideNumber;
    Image.src = "IMAGE/img"+ imagecount +".jpg";
    chgBubbleColor();
}  

.container-fluid {
    width: 100%;
    position: relative;
    height: auto;
}

#img {
    width: 100%;
    height: auto;
    position: relative;
}

#left-arrow .left {
    width: 5%;
    position: absolute;
    top: 40%;
    left: 20px;
    opacity:0.5;
}

#right-arrow .right {
    width: 5%;
    position: absolute;
    top: 40%;
    right: 20px;
    opacity:0.5;
}

#left-arrow .left:hover {
   cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}

#right-arrow .right:hover {
    cursor:pointer;
    cursor:hand;
    background: #4E9F69;
}

<div class="container-fluid">
    <img src="IMAGE/img1.jpg" alt="" id="img"/>
    <div id="left-arrow"><img onClick="slide(-1)" class="left" src="IMAGE/arrow-left.png" alt=""/></div>
    <div id="right-arrow"><img onClick="slide(1)" class="right" src="IMAGE/arrow-right.png" alt=""/></div>
</div>

Answer 1

您首先需要的是可以合法获得焦点的元素。说，一个。使用不带 href 的 a 是有效的。

<div class="myImageSliderWrap">
 <a class="MyImageSliderLeftBut"></a>
 <a class="MyImageSliderRightBut"></a>
 <img ... etc >
</div>

现在将您的 a 设置为高度为 100%、宽度为 50% 的 block ，以便它们与您的整个图片重叠，并放入您进一步设置样式的 SVG 箭头图像，或使用具有背景定位的背景图像。

请记住，您将需要阅读 WAI aria Angular 色和 tabindex 的使用，以使其更接近可访问性。

祝你好运。