使用 jQuery 悬停时添加和删除类

Question

我不明白为什么这不起作用 - 有帮助吗？我希望它在我将鼠标悬停在 .hoveroverme 上时弹出 div

jQuery

$(document).ready(function(){
 $(".hoveroverme").hover(
    function(){
$('.popupbox').addClass('popupnobox');},
    function(){
$('.popupbox').removeClass('popupnobox'); }
);

CSS

.popupnobox{
    visibility: hidden;
    opacity: 100;
}

.popupbox{
    background-color:magenta;
    box-shadow: 1px 1px 3px 3px;
    width:500px;
    height:400px;
    border:2px solid black;
    justify-content: center;
    align-content: center;
    margin:0 auto;
}

.hoveroverme{
    background-color:green;
}

HTML

<div class="hoveroverme">Hover Over Me!</div>
<div class="popupbox"></div>

Answer 1

$(document).ready(function(){
 $(".hoveroverme").on("hover",
    function(){
$('.popupbox').addClass('popupnobox');},
    function(){
$('.popupbox').removeClass('popupnobox'); }
);

Answer 2

我猜你已经定义了 popupnobox css class 反过来。据我了解；最初 popupbox 应该是不可见的，只要我们将鼠标悬停在 hoveroverme 上；那么只有它应该如下可见：

$(document).ready(function() {
      $(".hoveroverme").hover(
        function() {
          $('.popupbox').addClass('popupnobox');
        },
        function() {
          $('.popupbox').removeClass('popupnobox');
        }
      );
  });

.popupnobox {
  visibility: visible!important;
  opacity: 100;
}
.popupbox {
  background-color: magenta;
  box-shadow: 1px 1px 3px 3px;
  width: 500px;
  height: 400px;
  border: 2px solid black;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  visibility: hidden;
}
.hoveroverme {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="hoveroverme">Hover Over Me!</div>
<div class="popupbox"></div>

Answer 3

在我的建议中最好使用 id 不打扰 class

$(document).ready(function() {
      $(".hoveroverme").hover(
        function() {
          $('#popupbox').addClass('popupnobox');
        },
        function() {
          $('#popupbox').removeClass('popupnobox');
        }
      );
  });

.popupnobox {
  visibility: visible!important;
  opacity: 100;
}
.popupbox {
  background-color: magenta;
  box-shadow: 1px 1px 3px 3px;
  width: 500px;
  height: 400px;
  border: 2px solid black;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  visibility: hidden;
}
.hoveroverme {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoveroverme">Hover Over Me!</div>
<div class="popupbox" id="popupbox"></div>

Answer 4

你的JQuery脚本不正确，请看这个Codepen

代码：

HTML

<div class="hoveroverme">Hover Over Me!</div>
<div class="popupbox"></div>

CSS

.popupnobox{
    visibility: hidden;
    opacity: 100;
}

.popupbox{
    background-color:magenta;
    box-shadow: 1px 1px 3px 3px;
    width:500px;
    height:400px;
    border:2px solid black;
    justify-content: center;
    align-content: center;
    margin:0 auto;
}

.hoveroverme{
    background-color:green;
}

JS

$(document).ready(function(){
 $(".hoveroverme").hover(
    function(){
$('.popupbox').addClass('popupnobox');
    },
    function(){
$('.popupbox').removeClass('popupnobox');
    });
 });

使用 jQuery 悬停时添加和删除类

add- and removeClass on hover with jQuery

jquery

addclass

removeclass