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

Question

这个问题已经有答案了:

Making js activate divs sepratly (1 个回答)

已关闭 10 年前。

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

我有 2 个盒子(div)，每个盒子都有一个 slider 。当我将鼠标悬停在其中任何一个上时，两个 slider 都会被激活。

我该如何制作，以便每个 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;  
}

Answer 1

添加“this”关键字并可选择替换 $(function(...)) 上的 $(document).ready(function(...)) 。

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