0

私はJSが初めてで、助けが必要です!

それぞれにスライダーがある 2 つのボックス (div) があります。それらのいずれかの上にマウスを置くと、両方のスライダーがアクティブになります。

各divが個別にアクティブになるようにするにはどうすればよいですか。

ここに私がやっていることの私の写真があります。もう少し明確になるかもしれません：

pic.twitter.com/1ju3iZ0KIM - マウスオーバー前 pic.twitter.com/gmfhl1zl2J - マウスオーバーあり

本当にありがとう！

これは私のJSです

<script type="text/javascript">
    $(document).ready(function(){
        $('.up-down').mouseover(function(){
            $('.default').stop().animate({
                height: 0  
            }, 200);                        
        }).mouseout(function(){
            $('.default').stop().animate({
                height: 170 
            }, 200)    
        })
    });
</script>

私のdiv

<div class="squareFeedBox">
    <div class="up-down">
        <div class="slide default"></div>
        <div class="slide onhover"></div>
    </div>
</div>
<div class="squareFeedBox">
    <div class="up-down">
        <div class="slide default"></div>
        <div class="slide onhover"></div>
    </div>
</div>

私のCSS

/コンテンツ ボックス/

.squareFeedBox
{
    background-color: #fff;
    width: 278.5px;
    height: 207px;
    margin-right: 16px;
    margin-bottom: 16px;
    float: left;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #0f2134;
    overflow: hidden;
}

/*upSlider*/

.up-down 
{
    overflow:hidden;
    height: 207px;
    width: 278.5px;
}

.slide 
{
    width:278.5px;
    height:207px;
}



.default 
{
    background-color:#fff;
    height: 170px;
    width: 278.5px;
}

.onhover 
{
    background-color:#1DB7CB;
    height: 207px;
    width: 278.5px;  
}
4

1 に答える 1

2 
$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $(this).find('.default').stop().animate({
            height: 0  
        }, 200);                        
    }).mouseout(function(){
        $(this).find('.default').stop().animate({
            height: 170 
        }, 200)    
    })
});

を使用すると、すべてではなく、現在の要素内に含まれる$(this).find 特定のものを見つけます。.default.default

于 2013-03-08T19:29:53.613 に答える