javascript - 悬停时展开/折叠 div - 不活动时不折叠

Question

我设置了一些 div，因此当您将鼠标悬停在它们上面时它们会展开，但目前当您不将鼠标悬停在它们上面时它们不会关闭，它只是停留在您悬停在它们上面的最后一个上。如果您不将鼠标悬停在一个上，我如何才能让它们全部关闭？

JS

   function hoverTiles(){
        var tiles = $('.button');
        tiles.removeClass('active');
        tiles.hover(function(){
            tiles.removeClass('active');
            $(this).addClass('active');
        })
    }

$(document).ready(function() {

    hoverTiles();

  })

CSS

.buttons .button h4 { 
    z-index:3;
    position: absolute; 
    bottom: 5%; 
    left: 5%; 
    width: 82%; 
}

.buttons {
  margin-top: 50px;
  text-align: center;
}
.buttons .button {
  display: inline-block;
position:relative;
  overflow: hidden;
  width: 32%;
  height: 300px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 1px;
  margin: 5px;
  vertical-align: top;
  -webkit-transition: 0.25s all ease-in-out;
  -moz-transition: 0.25s all ease-in-out;
  -ms-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
}
.buttons .button span {
  display: block;
  font-size: 54px;
  -webkit-transition: 0.25s all ease-in-out;
  -moz-transition: 0.25s all ease-in-out;
  -ms-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
}
.buttons .button h4 {
  margin-top: 0;
  font-weight: 600;
  color: grey;
  -webkit-transition: 0.25s all ease-in-out;
  -moz-transition: 0.25s all ease-in-out;
  -ms-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
}
.buttons .button p {
  font-size: 14px;
  opacity: 0;
  padding: 15px;
  color: grey;
}
.buttons .button p a {
  color: #1489ff;
  text-decoration: none;
}
.buttons .active {
  width: 32%;
  height: 100%;
}
.buttons .active span {
  -webkit-transition: 0.25s all ease-in-out;
  -moz-transition: 0.25s all ease-in-out;
  -ms-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
  font-size: 81px;
}
.buttons .active p {
  opacity: 1;
  -webkit-transition: 0.25s all ease-in-out;
  -moz-transition: 0.25s all ease-in-out;
  -ms-transition: 0.25s all ease-in-out;
  -o-transition: 0.25s all ease-in-out;
  transition: 0.25s all ease-in-out;
  -webkit-transition-delay: 0.25s;
  -moz-transition-delay: 0.25s;
  -ms-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.buttons .active h4 {
  margin-top: 15px;
display:none;
}

HTML

<div class="buttons">

    <div class="button active">
        <span><i></i></span>
        <div class="header">
        <img src="/pageassets/test.jpg" alt="" />
        <h4 style="color:black;">Documents</h4>
        </div>
        <ul>    
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Answer 1

hover 可以将第二个函数作为参数，当鼠标离开元素时添加一个处理程序。您可以在那里再次删除类(class):

tiles.hover(function(){
   $(this).addClass('active');
}, function() {
   $(this).removeClass('active');
})