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可以将第二个函数作为参数，为鼠标离开元素时添加处理程序。您可以在那里再次删除该课程：

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

Answer 2

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

来自https://api.jquery.com/hover/

的示例

如果您想以不同方式执行此操作，也可以使用mouseover（）和mouseout（）。

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

2 个答案: