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

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

Answer 2

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