0

ホバー時に子divにスライドするjQueryコードを書いています。そのクラスの下にいくつかの子要素があるため、親要素にカーソルを合わせると、ホバーされていない要素に対してもすべての子要素が表示されるという問題があります。親要素にカーソルを合わせたときに、テキストを含む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内のすべての要素はa内にある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 */
}

デモ

于 2013-03-20T17:31:23.890 に答える