如何在悬停幻灯片放映时显示箭头

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

您首先需要的是合法关注的元素。说，一个。使用a without href是有效的。

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

现在将您的作为块的样式设置为高度为100％且宽度为50％，以便它们与整个图片重叠，并将其放入您进一步调整样式的SVG箭头图像中，或者使用背景图像背景定位。

请记住，您需要阅读WAI咏叹调角色以及使用tabindex才能使其接近可访问性。

祝你好运。

Answer 2

使用mouseenter和mouseleave隐藏或显示箭头。

＆＃13;

＆＃13;

$(function (){
		$(".container-fluid").mouseenter(function(){
		$("#left-arrow, #right-arrow").show();
		});
		$(".container-fluid").mouseleave (function(){
		$("#left-arrow, #right-arrow").hide();
		});
});

＆＃13;

＆＃13;

＆＃13;