how to show arrow only when hover slideshow 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.

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)

 .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

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

how to show arrow only when hover slideshow html css javascript

Question

2 answers

solution1
3 ACCPTED 2016-08-26 01:14:18

solution2
1 2016-08-26 01:09:51

how to show arrow only when hover slideshow html css javascript

Question

2 answers

solution1 3 ACCPTED 2016-08-26 01:14:18

solution2 1 2016-08-26 01:09:51

solution1
3 ACCPTED 2016-08-26 01:14:18

solution2
1 2016-08-26 01:09:51