jQuery로 호버상에서 add- and removeClass를 사용합니다.

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

나는 당신이 추측 위에 마우스로 팝업 할을 정의했다.css class other way round. 내 이해에 따라; 처음에는 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 2

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

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