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

Question

I am trying to show arrows only when the mouse hover on the image.我试图仅当鼠标悬停在图像上时才显示箭头。

Is there any way this can be done in CSS, html or Javascript.有什么办法可以在 CSS、html 或 Javascript 中完成。

Any help will be appreciated.任何帮助将不胜感激。

Thanks.谢谢。

<html>
<style>
.prev {
    opacity: 0;
    position: absolute;
    top: 34%;
    left: 0;
}

.prev:hover {
    opacity: 1.0;
}

.next {
    opacity: 0;
    position: absolute;
    top: 34%;
    right: 0;
}

.next:hover {
    opacity: 1.0;
}

</style>

<body>
<div class="outerBox">

                <img src="SliderLeftArrow.svg" alt ="Prev" class = "prev" /> 

                <img src="SliderRightArrow.svg" alt ="Next" class = "next"/>

                <img src="image1.jpg" class="imageBox" id="image_slider" />
</div>
</body>
</html>

Answer 1

if you want the arrows to appear when hovering over the image - one way is to have the css as follows (I've dummied up image and arrows as pure text, but the principal remains the same)如果您希望在将鼠标悬停在图像上时出现箭头 - 一种方法是使用 css 如下（我已经将图像和箭头作为纯文本进行了虚拟化，但主要内容保持不变）

 .prev, .next { opacity: 0; transition: opacity 800ms; } .outerBox:hover .prev, .outerBox:hover .next { opacity: 1.0; }

 <div class="outerBox"> <span class="prev">&lt;&lt;&lt;</span> <span>I am an image</span> <span class="next">&gt;&gt;&gt;</span> </div>

I also added a transition to the opacity, because I like transitions :p我还为不透明度添加了过渡，因为我喜欢过渡：p

Answer 2

Add this code and your problem should be fixed.添加此代码，您的问题应该得到解决。

.prev, .next {
     visibility: hidden;
}
.prev:hover, .next:hover {
     visibility: hidden;
}

Or this code.或者这个代码。

.prev, .next {
     color: /*whatever the background color is i.e. white*/;
}
.prev:hover, .next:hover {
     color: /*something contrasting from your background color i.e. black*/;
}

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-08-26 01:14:18

解决方案2
1 2016-08-26 01:09:51

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-08-26 01:14:18

解决方案2 1 2016-08-26 01:09:51

解决方案1
3 已采纳 2016-08-26 01:14:18

解决方案2
1 2016-08-26 01:09:51