Question

我正在编写一个在悬停时在子div中滑动的jQuery代码。因为我在该类下面有几个子元素，所以存在一个问题，即在悬停任何父元素时，所有子元素都显示，即使对于尚未悬停的元素也是如此。我希望在父元素悬停时滑动包含文本的div。我的示例代码在这里，小提琴是here

Css就在这里

.artistAndVideo {
    background-color: black;
    display: none;
    color: white;
    bottom: 0px;
    position: absolute;
    margin-bottom: 6px;
    width: 211px;
    text-align: center;
    height: 40px;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

HTML

 <div id="mycarousel" class="jcarousel-skin-ie7">
                <ul>
    <li><div style="overflow:hidden;"><img src="image.png" width="211" height="170"/><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>';
        <div style="overflow:hidden;"><img src="image.png" width="211" height="170" /><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>';
      </li><li>  <div style="overflow:hidden;"><img src="image.png" width="211" height="170" /><div class="artistAndVideo"><span style="opacity:1;">some stuff here<span></div></div>';
   </li>  </ul>
            </div>

的Javascript

$("#mycarousel").hover(function(){                  
                    $('.artistAndVideo').slideToggle();
                });

Answer 1

试试这个：

 $("#mycarousel li").hover(function () {
    $(this).find('.artistAndVideo').stop(true,true).animate({ top : -45});
    },function () {
     $(this).find('.artistAndVideo').stop(true,true).animate({ top : -5});
 });

Html：ul中的所有元素都必须位于li

中

<div id="mycarousel" class="jcarousel-skin-ie7">
<ul>
    <li>
        <div style="overflow:hidden;height:170px;margin-bottom:10px">
            <img src="image.png" width="211" height="170" />
            <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span>
            </div>
        </div>
    </li>
    <li>
        <div style="overflow:hidden;;height:170px;margin-bottom:10px">
            <img src="image.png" width="211" height="170" />
            <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span>
            </div>
        </div>
    </li>
    <li>
        <div style="overflow:hidden;;height:170px;margin-bottom:10px">
            <img src="image.png" width="211" height="170" />
            <div class="artistAndVideo"><span style="opacity:1;">some stuff here</span>
            </div>
        </div>
    </li>
</ul>
</div>

的CSS：

.artistAndVideo {
  background-color: black;
  display: block;
  color: white;
  bottom: 0px;
  position: relative;
  top: -5px;
  margin-bottom: 6px;
  width: 211px;
  text-align: center;
  height: 40px;
  opacity:0.4;
  filter:alpha(opacity=40);
  /* For IE8 and earlier */
}

<强> DEMO

JQuery每个元素滑动单个项目

1 个答案: