CSS/jQ/jS - 上一个/下一个按钮不会堆叠在 img 循环器上

Question

我正在尝试制作一个带有上一个/下一个导航的图像循环器。我让它运行了，但导航按钮不会出现在 img 上。我使用<li> a: 和带有文本缩进-9999px 的背景并将z-index 设置为高于img。

CSS

div#slideshow {
  width: 1920px; height: 816px;
  overflow: scroll; 
  position: relative; z-index: 5;}

div#slideshow ul#navigation {
  display: none;
  list-style-type: none;
  position: relative; top: 375px; z-index: 15;}

div#slideshow ul#navigation li#prev {
    float: left;}

div#slideshow ul#navigation li#next {
    float: right;}

div#slideshow ul#navigation li a {
    display: block; width: 65px; height: 66px; text-indent: -9999px;}
div#slideshow ul#navigation li#prev a {
    background: url(http://www.nobodyfilm.org/images/Arrow-Left.jpg);}
div#slideshow ul#navigation li#next a {
    background: url(http://www.nobodyfilm.org/images/Arrow-Right.jpg);}

div#slideshow ul#slides {
    list-style: none;}

jQ

$(document).ready(function() {

$("#slideshow").css("overflow", "hidden");

$("ul#slides").cycle({
    fx: 'fade',
    pause: 1,
    prev: '#prev',
    next: '#next'
});

$("#slideshow").hover(function() {
    $("ul#navigationv").fadeIn();
    },
        function() {
    $("ul#navigation").fadeOut();
    });
});

HTML

<div id="container">
    <div id="slideshow">
    <ul id="navigation">
      <li id="prev"><a href="#">Previous</a></li>
      <li id="next"><a href="#">Next</a></li>
    </ul>

    <ul id="slides">
      <li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Train-Station.jpg" alt="Pic1" /></li>
      <li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Overview-and-Production.jpg" alt="Pic2" /></li>
      <li><img src="http://nobodyfilm.org/images/Mr.-Nobody-Themes-And-Philosophy.jpg" alt="Pic3" /></li>
      </ul>
  </div>
</div>

http://nobodyfilm.org/slideshow.html

编辑：有谁知道将鼠标移出容器元素时导航元素消失的原因是什么？

Answer 1

它们没有显示是因为您将它们隐藏：更改以下内容：

div#slideshow ul#navigation {
  display: none;
  list-style-type: none;
  position: relative; top: 375px; z-index: 15;
}

到这里：

div#slideshow ul#navigation {
  display: block;
  list-style-type: none;
  position: relative; top: 375px; z-index: 15;
}

注意我使用了display:block; 而不是display:none;