在悬停时展开/折叠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可以采取的第二功能为这增加了当鼠标离开该元件的处理程序的参数。从https://api.jquery.com/hover/

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

Answer 2

$("td").hover(
    function() { 
    $(this).addClass("hover"); 
    }, function() { 
    $(this).removeClass("hover"); 
    } 
); 

它的例子也可以使用鼠标悬停（）和鼠标移出（），如果你想要做的是不同的：你可以再次在那里删除类。