add- and removeClass on hover with jQuery

Question

I don't see why this doesn't work - any help? I want it to pop up as I hover over the .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

I guess you have defined the popupnobox css class other way round. As per my understanding; initially popupbox should be invisible and whenever we hover over the hoveroverme; then only it should be made visible as follows:

$(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 2

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

Answer 3

In my suggestion Better use id is not disturb with the 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

Your JQuery script is incorrect, please see this Codepen

Code:

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');
    });
 });