jQueryでホバー上のadd-とremoveClassを

Question

私はなぜこれが動作しない参照してください - どのようなヘルプ？ 私は私はあなたが持っていると思う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

私は.hoveroverme divの上にカーソルを置くと、それは

をポップアップ表示したいですを定義しました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を使用すると、お使いのjQueryの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

に邪魔されていませんスクリプトが間違っています、ご覧くださいこの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'); 
    }); 
});