JavaScript/CSS 悬停功能

Question

是否可以仅使用原生 JavaScript 或 CSS 来创建类似于我在下面的代码中所拥有的内容？我还希望它让悬停 div 保持打开状态，直到单击按钮，然后将原始 div 向下滑动。一切都有帮助，干杯!

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

});

.up-down {
    overflow:hidden;
    height:200px;
    width:200px;
}
.slide {
    width:200px;
    height:200px;
}
.default {
    background-color:#ccc;
}
.onhover {
    background-color:#1DB7CB;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="up-down">
<div class="slide default"></div>
<div class="slide onhover"></div>
</div>

Answer 1

使用您的代码作为背景，您可以这样做:

请记住，Jquery 只是一个 Javascript 库，您可以在 Jquery 上做的任何事情都可以在 Javascript 上完成。

var updown = document.querySelector('.up-down');
var def = document.querySelector('.default');
var btn = document.querySelector('.clickMe');

updown.addEventListener('mouseover', function() {
    def.style.height = '0px';
});

btn.addEventListener('click', function() {
    def.style.height = '200px';
});

.up-down {
    overflow:hidden;
    height:200px;
    width:200px;
}
.slide {
    width:200px;
    height:200px;
}
.default {
    background-color:#ccc;
    transition: height .2s linear;
}
.onhover {
    background-color:#1DB7CB;
    
}

<div class="up-down">
  <div class="slide default"></div>
  <div class="slide onhover"><button class="clickMe">
Click me
</button></div>
</div>