Question

我创建了一个简单的框，应该在点击它时打开/关闭以显示内容。我还想在h2元素上使用鼠标悬停。这是有效的，但是当盒子打开时，不应该是悬停效果。

这可以用CSS完成，还是必须使用JS？

＆＃13;

    $('.box > h2').on('click', function() {
      $(this).next('div').slideToggle();
    });

＆＃13;

.box h2 {
      padding: .5em;
    }
    .box h2:hover {
      background-color: #ccc;
    }
    .box > div {
      display: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
      <h2>Title</h2>
      <div>Any content</div>
    </div>

＆＃13;

Answer 1

使用CSS无法实现这一点，但是您可以使用toggleClass() jQuery方法在jQuery代码中添加一点点更改来实现此目的：

只需在<h2>拥有.closed课程时在CSS中添加悬停效果，然后每次执行slideToggle()时，您都会从点击中删除/添加.closed课程元件。您可以在此处看到修改过的代码：

＆＃13;

$('.box > h2').on('click', function() {
      $(this).next('div').slideToggle();
      $(this).toggleClass('closed');
  
    });

＆＃13;

.box h2 {
      padding: .5em;
    }
    .box h2.closed:hover {
      background-color: #ccc;
    }
    .box > div {
      display: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
      <h2 class="closed">Title</h2>
      <div>Any content</div>
    </div>

＆＃13;

Answer 2

jQuery有一个:visible选择器。您可以切换hover班级。

 $('.box > h2').on('click', function() {
   $(this).removeClass('hover').next('div').slideToggle();
 }).hover(function() {
   if (!$(this).siblings('div').is(':visible')) {
     $(this).addClass('hover');
   }
 }, function() {
   $(this).removeClass('hover');
 });

.box h2 {
  padding: .5em;
}
.box h2.hover {
  background-color: #ccc;
}
.box > div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <h2>Title</h2>
  <div>Any content</div>
</div>

如果下一个元素可见，则删除悬停效果

2 个答案: