Question

Noob问题：我有以下html代码，如何在悬停时只在jQuery中在.active和.inactive之间切换一个占位符。

例如：如果我将鼠标悬停在第一个div上，它们都会变为活动状态，我希望{I}只在我悬停的那个上面.active。我知道它的意大利面条代码，但我有点卡住了，希望你理解我想说的话。

<div class="wrapper">
    <div class="inactive">
        <div class="col-md-6 col-xs-12 placeholder  ">
            <a href="http://codepen.io/gabew3/full/YpKGwr/">
                <img src="http://i.imgur.com/A92WrwJ.jpg" alt="" class="img-responsive">
            </a>
            <p class="text-center">A tribute page dedicated to Agatha Christie</p>
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="inactive">
        <div class="col-md-6 col-xs-12 placeholder ">
            <a href="#">
                <img src="http://i.imgur.com/5P1UTjv.jpg" alt="" class="img-responsive">
            </a>
            <p class="text-center">Placeholder</p>
        </div>
    </div>
</div>

Answer 1

您可以使用jQuery的.hover()方法以及.toggleClass()。

$('.wrapper').hover(function() {
  $(this).toggleClass('active inactive');
});

注意： 请注意，您的结构中有一个div过多。您可以active上有inactive和div.wrapper个班级。

$('.wrapper').hover(function() {
  $(this).toggleClass('active inactive');
});

.inactive {
  opacity: 0.5
}

.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper inactive">
  <div class="col-md-6 col-xs-12 placeholder  ">
    <a href="http://codepen.io/gabew3/full/YpKGwr/">
      <img src="http://i.imgur.com/A92WrwJ.jpg" alt="" class="img-responsive">
    </a>
    <p class="text-center">A tribute page dedicated to Agatha Christie</p>
  </div>
</div>
<div class="wrapper inactive">
  <div class="col-md-6 col-xs-12 placeholder ">
    <a href="#">
      <img src="http://i.imgur.com/5P1UTjv.jpg" alt="" class="img-responsive">
    </a>
    <p class="text-center">Placeholder</p>
  </div>
</div>

Answer 2

最适合您的解决方案是使用mouseenter和mouseleave方法。

当您将鼠标悬停在.wrapper时，它会在.active和.inactive之间切换。我在这些课程中添加了一些css以了解其中的差异。

＆＃13;

$(document).ready(function(){
  
  var $wrapper = $('.wrapper');
  
  $wrapper.on({
    mouseenter: function() {
       $wrapper.addClass('active').removeClass('inactive');
    }, mouseleave: function() {
       $wrapper.addClass('inactive').removeClass('active');
    }
  });
  
});

＆＃13;

.wrapper.inactive {
 opacity: 0.5;
}

.wrapper.active {
 opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inactive">
    <div class="col-md-6 col-xs-12 placeholder  ">
      <a href="http://codepen.io/gabew3/full/YpKGwr/">
        <img src="http://i.imgur.com/A92WrwJ.jpg" alt="" class="img-responsive">
      </a>
      <p class="text-center">A tribute page dedicated to Agatha Christie</p>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="inactive">
    <div class="col-md-6 col-xs-12 placeholder ">
      <a href="#">
        <img src="http://i.imgur.com/5P1UTjv.jpg" alt="" class="img-responsive">
      </a>
      <p class="text-center">Placeholder</p>
    </div>
  </div>
</div>

＆＃13;

如果您需要有关js代码的任何进一步说明，请与我们联系。

如何在单个div上切换类？

2 个答案: