在懸停時展開/摺疊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"); 
    } 
); 

它的例子也可以使用鼠標懸停（）和鼠標移出（），如果你想要做的是不同的：你可以再次在那裏刪除類。