jQueryでホバー（hover）メソッドを使用してボックスを表示するにはどうすればよいですか？

Question

jQueryでホバー（hover）メソッドを使用してボックスを表示するにはどうすればよいですか？私はあなたが本当にしたいjQueryのホバー機能を使用する場合は、この1 example

Answer 1

のようにボタンを置くことで、私のボックスを開きたい は、別のホバリング時に要素を表示する方法については、以下の簡単な例があります。考え方は、ボタンをホバーするときにクラスを "ボックス"に追加し、そのクラスをCSSでスタイルすることです。この場合、ボックスはデフォルト（visibility: hidden;）で非表示になり、クラスvisibleが追加されると、ボックスは代わりにスタイルvisibility: visible;を取得します。

これはCSSでのみ行うことができます。あなたがこれまでに試してみました何

$("#button1").hover(function(){ 
 
    $('#box1').addClass('visible'); 
 
},function(){ 
 
    $('#box1').removeClass('visible'); 
 
});

#box1{ 
 
    margin-top: 20px; 
 
    visibility: hidden; 
 
    opacity:0; 
 
    position:relative; 
 
    top: -10px; 
 
    background-color: #eee; 
 
    padding: 5px; 
 
    transition: visibility 0s, opacity 0.2s, top 0.2s; 
 
} 
 
#box1.visible{ 
 
    visibility: visible; 
 
    opacity: 1; 
 
    top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" id="button1">Hover me</a> 
 
<div id="box1">I'm a box</div>