Question

我有一个悬停功能（叠加），但我更喜欢它是否适用于点击。再次单击时，它将恢复为默认值。然后单击另一个项目以获得相同的效果。试图得到它，但遇到了麻烦。切换在这里适合吗？

jQuery( document ).ready(function( $ ) {
    $('.trigger .orange-cell, .trigger .green-cell, .trigger .purple-cell, .trigger .white-cell, .trigger2 .orange-cell2, .trigger2 .green-cell2, .trigger2 .purple-cell2, .trigger2 .white-cell2').hover(function() {
        var colorClass = $(this).attr('class').split(' ')[1];
        $("."+colorClass ).addClass('z-relative');
        $('#darkness').fadeTo(200, 1);
    },function() {var colorClass = $(this).attr('class').split(' ')[1];;
        $("."+colorClass ).removeClass('z-relative');
        $('#darkness').fadeTo(200, 0, function(){
            $(this).hide();
        });
    });
});

http://codepen.io/Kerrys7777/pen/LkaYOW

Answer 1

＆＃13;

var check = true;
$(document).ready(function() {
  $('.cell').click(function() {
    console.log(check)
    if (check == true) {
      var colorClass = $(this).attr('class').split(' ')[1];
      $("." + colorClass).addClass('z-relative');
      $('#darkness').fadeTo(200, 1);
      check = false;
    } else {
      var colorClass = $(this).attr('class').split(' ')[1];;
      $("." + colorClass).removeClass('z-relative');
      $('#darkness').fadeTo(200, 0, function() {
        $(this).hide();
      });
      check = true;
    }

  });
});

＆＃13;

h1 {
  font-size: 46px;
}
ul {
  width: 20%;
  display: inline-block;
  vertical: top;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7)
}
ul li {
  background: #fff;
  list-style: none;
}
body {
  background-color: wheat;
  font-family: Georgia, Constantia, "Lucida Bright", "DejaVu Serif", serif;
}
#darkness {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 150%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.z-relative {
  position: relative;
  z-index: 10;
  -ms-transform: scale(1.05);
  /* IE 9 */
  -webkit-transform: scale(1.05);
  /* Safari */
  transform: scale(1.05);
  /* Standard syntax */
}
.cell {
  padding: 15px;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}
/*ul li:nth-child()*/

.orange-cell,
.orange-cell2 {
  background: #ffc000;
}
.green-cell,
.green-cell2 {
  background: #92d050;
}
.purple-cell,
.purple-cell2 {
  background: #b3a2c7;
}
.white-cell,
.white-cell2 {
  background: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>DAY 1</h1>
<div id="darkness"></div>
<ul class="trigger">
  <li class="cell orange-cell">Home</li>
  <li class="cell green-cell">About</li>
  <li class="cell purple-cell">Contact</li>
  <li class="cell white-cell">Num</li>
</ul>


<ul>
  <li class="cell orange-cell">Home</li>
  <li class="cell green-cell">About</li>
  <li class="cell purple-cell">Contact</li>
  <li class="cell white-cell">Num</li>
</ul>

<ul>
  <li class="cell orange-cell">Home</li>
  <li class="cell green-cell">About</li>
  <li class="cell purple-cell">Contact</li>
  <li class="cell white-cell">Num</li>
</ul>
<br>
<br>
<hr>
<br>
<br>
<h1>DAY 2</h1>
<ul class="trigger2">
  <li class="cell orange-cell2">HOVER ME</li>
  <li class="cell green-cell2">HOVER ME</li>
  <li class="cell purple-cell2">HOVER ME</li>
  <li class="cell white-cell2">HOVER ME</li>
</ul>


<ul>
  <li class="cell orange-cell2 white-cell2" style="background:#ffc000;">Home</li>
  <li class="cell green-cell2">About</li>
  <li class="cell purple-cell2" style="background:#b3a2c7;">Contact</li>
  <li class="cell white-cell2" style="background:#FFF;">Num</li>
</ul>

<ul class="trigger2">
  <li class="cell purple-cell2 orange-cell2" style="background:#ffc000;">Home</li>
  <li class="cell purple-cell2 green-cell2" style="background:#92d050;">About</li>
  <li class="cell purple-cell2 white-cell2" style="background:#b3a2c7;">Contact</li>
  <li class="cell purple-cell2 white-cell2" style="background:#FFF;">Num</li>
</ul>

<ul class="trigger2">
  <li class="cell orange-cell2">Home</li>
  <li class="cell green-cell2">About</li>
  <li class="cell purple-cell2">Contact</li>
  <li class="cell white-cell2 purple-cell2" style="background:#FFF;">Num</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

＆＃13;

这样做。如果真的在false false上进行检查，请检查

jQuery隐蔽悬停功能点击功能 - 切换？

1 个答案: