別のdivをマウスで表示する

Question

divを作成しようとしていますが、マウスを置くと別のdivが表示されます。これは私がこれまでに...

HTML

<div id="buttons"> 
<div id="box"></div> 
<div id="content">content here</div> 
</div> 

CSS

#box { 
position:absolute; 
width: 10vw; 
height: 10vw; 
background-color: blue; 
} 

#content { 
position:absolute; 
width: 10vw; 
height: 10vw; 
background-color: red; 
visibility: hidden; 
} 

jqueryの

$("box") 
.mouseover(function() { 
$("content").style.visibility("visible"); 
}) 

任意のヘルプあなたの持っているものです大変感謝しています。ありがとう！

Answer 1

あなたは多くの場所で、純粋なJavaScriptでjQueryのを混同している...

どちらかのjQueryでこれを実行します。

$("#box").mouseover(function() { 
    $("#content").css("visibility", "visible"); 
}); 

または純粋なJavaScriptで次の操作を行います。

document.getElementById("box").onmouseover = function() { 
    document.getElementById("content").style.visibility = "visible"; 
}; 

しかし、CSSだけを使っても同じ効果を得ることができます：

あなたが使用することができ

#box { 
 
    position:absolute; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: blue; 
 
} 
 

 
#content { 
 
    position:absolute; 
 
    width: 10vw; 
 
    height: 10vw; 
 
    background-color: red; 
 
    visibility: hidden; 
 
} 
 

 
#box:hover + #content { 
 
    pointer-events: none; 
 
    visibility: visible; 
 
}

<div id="buttons"> 
 
    <div id="box"></div> 
 
    <div id="content">content here</div> 
 
</div>

Answer 2

：

('#box').hover(
    function() { 
    $('#content').show(); //or css('visibility','visible'); 
    }, 
    function() { 
    $('#content').hide(); //or css('visibility','hidden'); 
    } 
); 

これはdiv要素を表示/非表示します。ここでhttps://jsfiddle.net/8dpcuztk/

、代わりに可視属性の表示と遊ぶん：どれもあなたは「＃」

Answer 3

ここでの作業フィドルを参照してくださいを欠場します。

本質的に、2番目のdivの表示と非表示の機能を使用します。

また、Idを検索しているためセレクタが機能しないため、div idの前に＃を使用する必要があります。

$("#box").on("mouseover", function() { 
    $("#content").show(); 
}) 

Answer 4

jQueryを使用してくださいappend。

$("#box").on('mouseenter', function() { 
$("#content").append("<div class='box'></div>"); 
}); 

https://jsfiddle.net/32eckm71/40/

Answer 5

$("#box").hover(
 
    function() { 
 
    $("#content").fadeIn(); //.show(); 
 
    }, 
 
    function(){ 
 
    $("#content").fadeOut(); //hide(); 
 
    } 
 
);

#buttons{position:relative;} 
 
#box { 
 
position:absolute;top:0;left:0;width:10vw;height:10vw;background-color:blue;cursor:pointer; 
 
} 
 

 
#content { 
 
position:absolute;top:100px;left:100px;width:10vw;height:10vw;background-color:red; 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <div id="box"></div> 
 
    <div id="content">content here</div> 
 
</div>