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类。据我所知;当我们将鼠标悬停在popupbox上时，最初hoveroverme应该是隐身的;那么只有它应该如下所示：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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悬停时添加和删除类

4 个答案: