Cem Cem - 1 month ago 8
jQuery Question

add- and removeClass on hover with jQuery

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

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>

Comments