Javascript 使div具有不同的鼠标悬停效果

我是JS新手，需要一些帮助

我有两个盒子（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>

添加“this”关键字并在$（function（…）上可选地替换$（document）.ready（function（…））

$（函数（）{
$（'.up-down'）.mouseover（函数（）{
$（'.default'，this.stop（）.animate({
^^^^
身高：0
}, 200);                        
}).mouseout（函数（）{
$（'.default'，this.stop（）.animate({
^^^^
身高：170
}, 200)    
})
});

您是否正在使用

onMouseOver

事件？另外，请确保所讨论的分区具有唯一的名称和ID。而不是相同的类名。请尝试确定解决方案中的问题区域，并发布相关代码，以便我们提供帮助。抱歉-我已添加了代码。请解释下一步我添加了什么？您应该添加“this”关键字并可选地替换$（document）。就绪（函数（…）)在$（函数（…）上）。就是这样：）关键字“this”表示您正在查找当前“.up-down”元素中的“.default”。@user1754324如果此答案解决了您的问题，请返回并将其标记为已接受的答案。

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

.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;  
}

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