javascript - 在 li 中获取特定图像之上的跨度

Question

我基本上是在尝试让我的跨度在鼠标悬停时显示，并且按预期工作。我想要做的是获取正确图像的跨度，因为我计划用更多内容填充该列表。

这是现在的样子:http://jsfiddle.net/uc8jc/539/

这是我的代码:

<ul class="frontpagephotos">
  <li>
    <img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
    <span>Jogginglarms armband</span>
  </li>
    <li>
    <img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
    <span>Jogginglarms armband</span>
  </li>
</ul>

$(document).ready(function(){
$("span").hide();



$(".frontpagephotos").on("mouseenter", "li", togglePhotos);
    $(".frontpagephotos").on("mouseleave", "li", togglePhotos);

    function togglePhotos() {
        $(this).find("span").slideToggle("fast");
    }
});

和CSS:

ul.frontpagephotos li{
    display: inline;    
}
ul.frontpagephotos li img{
    border: 2px solid black;
    position: relative;
}
ul.frontpagephotos span{
    position: absolute;
    color: rgb(255, 255, 255);
    background-color: rgb(0,0,0);
    opacity: 0.5;
    width: 18em;
    margin-top: -2.5em;
    padding: 0.5em;
    display: block;
    text-align: center;
}

感谢任何答案，干杯!

Answer 1

您的 span 具有 position: absolute 属性，因此它在具有 position: relative 的下一个父级中相对定位。它应该位于 li 中的相对位置，但实际上 position: relative 的下一个父级是主体(或窗口？)。

简单的解决方案:将您的 CSS 代码更改为:

ul.frontpagephotos li {
    display: inline-block;  
    position: relative;
}

当 li 有 position: relative 时，span 在 li 内相对定位。您还需要 block 或 inline-block 才能设置 position: relative。

就是这样!工作 fiddle :http://jsfiddle.net/uc8jc/545/