Question

我基本上试图让我的跨度显示鼠标悬停，并按预期工作。我想要做的就是让正确的图像得到跨度，因为我打算用更多东西填充该列表。

继承我的代码：

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

那就是它！工作小提琴：http://jsfiddle.net/uc8jc/545/

Answer 2

你可以改用hover，只需将$（this）传递给on和off状态的函数：

$(document).ready(function(){
  $('span').hide();
  $("img").hover(function(){
    togglePhotos($(this));
  },
  function(){
    togglePhotos($(this));
  });

  function togglePhotos(obj) {
    obj.next().slideToggle();
  }
});

http://jsfiddle.net/uc8jc/544/

在li中获取特定图像的跨度

2 个答案: