如何在悬停幻灯片时仅显示箭头
如何在悬停幻灯片时仅显示箭头
提问于 2016-01-27 03:49:07
如何修复仅当指针悬停在幻灯片上时才显示箭头的选项。就像你在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>
回答 2
Stack Overflow用户
发布于 2016-01-27 04:54:44
你首先需要的是在法律上可以获得焦点的元素。比方说，a。使用不带href的a是有效的。
<div class="myImageSliderWrap">
<a class="MyImageSliderLeftBut"></a>
<a class="MyImageSliderRightBut"></a>
<img ... etc >
</div>现在将a设置为高度为100%，宽度为50%的块，这样它们就可以覆盖整个图片，并放入SVG箭头图像中，您可以进一步设置样式，也可以使用具有背景定位的背景图像。
请记住，您将需要阅读有关WAI aria角色和tabindex的使用，以使其更接近可访问。
祝你好运。
Stack Overflow用户
发布于 2016-01-27 06:57:59
我已经使用鼠标输入和鼠标离开来隐藏或显示箭头。
$(function (){
$(".container-fluid").mouseenter(function(){
$("#left-arrow, #right-arrow").show();
});
$(".container-fluid").mouseleave (function(){
$("#left-arrow, #right-arrow").hide();
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35022578
复制相关文章
相似问题