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.
JavaScript
x
38
38
1
<html>2
<style>3
.prev {4
opacity: 0;5
position: absolute;6
top: 34%;7
left: 0;8
}9
10
.prev:hover {11
opacity: 1.0;12
}13
14
.next {15
opacity: 0;16
position: absolute;17
top: 34%;18
right: 0;19
}20
21
.next:hover {22
opacity: 1.0;23
}24
25
</style>26
27
<body>28
<div class="outerBox">29
30
<img src="SliderLeftArrow.svg" alt ="Prev" class = "prev" /> 31
32
<img src="SliderRightArrow.svg" alt ="Next" class = "next"/>33
34
<img src="image1.jpg" class="imageBox" id="image_slider" />35
</div>36
</body>37
</html>38
Advertisement
Answer
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)
JavaScript
1
12
12
1
.prev,2
.next 3
{4
opacity: 0;5
transition: opacity 800ms;6
}7
8
.outerBox:hover .prev,9
.outerBox:hover .next10
{11
opacity: 1.0;12
}JavaScript
1
6
1
<div class="outerBox">2
3
<span class="prev"><<<</span>4
<span>I am an image</span>5
<span class="next">>>></span>6
</div>I also added a transition to the opacity, because I like transitions :p