I am a beginner in the world of web development and I am trying to implement left and right navigation for images using arrows. My goal is to have the arrows fade in when the mouse hovers over the image and fade out when it's moved away. However, I am encountering an issue where the arrows only fade in but do not fade out as expected. There seems to be a slight flicker near the image tip, but the fade in and out effect is not functioning properly. I have tried adjusting the opacity values to 1 and 0, based on suggestions from related articles on Stack Overflow, but it doesn't seem to solve the problem. Can someone kindly point out where I might be making a mistake? Any assistance would be greatly appreciated.
Below is a snippet of the HTML code I am working with:
<div id="centralcontent">
<div id="slideshow">
<ul id="nav">
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
<div id="slides">
<img src="images/nature/imageone.jpg" width="1200" height="750">
</div>
</div>
</div>
Here is the corresponding CSS:
#centralcontent
{
padding-top:40px;
}
#slideshow {
width:1200px;
height:750px;
padding: 15px 0 0 12px;
margin: 0 auto;
position: relative;
z-index: 5;
margin-bottom:0px;
}
#slideshow ul#nav
{
display: none;
list-style: none;
position: relative;
top: 300px;
z-index: 10;
}
#slideshow ul#nav li#prev
{
float: left;
margin: 0 0 0 20px;
}
#slideshow ul#nav li#next
{
float: right;
margin: 0 50px 0 0;
}
#slideshow ul#nav li a
{
display: block;
width: 80px;
height: 80px;
}
#slideshow ul#nav li#prev a {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid gray;
width: 0;
height: 0;
}
#slideshow ul#nav li#next a {
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid gray;
width: 0;
height: 0;
}
#slides {
margin: 0 0 20px 0;
}
And here is the JavaScript code I am using:
$(document).ready(function() {
$("#slideshow").hover(function() {
$("ul#nav").fadeIn("slow");
},function() {
$("ul#nav").fadeOut("slow");
});
});