how to show arrow only when hover slideshow html css javascript

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>

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>

Share Improve this question asked Aug 26, 2016 at 0:57 user6642297 3935 silver badges22 bronze badges

Thank you very much @Jaromanda X, your answer solved the problem. Here i used your answer: – user6642297 Commented Aug 26, 2016 at 2:35
<div class="outerBox"> <img onclick="prev()" alt ="Prev" src="SliderLeftArrow.svg" class = "prev" style="left: 0;"/> <img onclick="next()" alt ="Next" src="SliderRightArrow.svg" class = "next"/ style="right: 0;"> <img src="image1.jpg" class="imageBox" id="image_slider" /> </div> – user6642297 Commented Aug 26, 2016 at 2:37

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

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

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 - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)