0

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

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();
                });
4

1 回答 1

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 : a 中的所有元素都ul必须在 anli

<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 */
}

演示

于 2013-03-20T17:31:23.890 回答