Question

我是网络开发的新手，需要使用左右箭头导航到图像。当鼠标悬停在图像上时我需要箭头淡入，当移出图像时我需要淡出。我可以看到箭头淡入但不淡出。在图像提示附近的某处，我看到一个小的闪烁但不是真的淡出和淡入，因为我将鼠标悬停在图像中。我尝试将不透明度更改为1和0，如stackoverflow中的相关文章所示，但它似乎无法正常工作。有人可以告诉我哪里出错了吗？有什么帮助表示赞赏？

这是一个示例html：

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

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

我的javascript是：

$(document).ready(function() {        
  $("#slideshow").hover(function() {
   $("ul#nav").fadeIn("slow");
     },function() {
    $("ul#nav").fadeOut("slow");
   });     
});

Answer 1

您的代码似乎对我有用：JS Fiddle

但是，我建议使用仅限CSS的方法。而不是给出箭头display: none;，给它们一个不透明度为零，并在包裹悬停时将其转换为完全不透明度：

CSS Only Approach - JS Fiddle

ul#nav {
    opacity: 0;
    transition: 1s;
}
#slideshow:hover ul#nav {
    opacity: 1;
}

移出图像时，左右箭头不会淡出

1 个答案: