Wie schwebe ich über den Bereich, um ein div erscheinen zu lassen?

Question

#hello{ 
    font-size: 4em; 
} 
div.about{ 
    display: none; 
} 
#hello:hover div.about { 
    display: block; 
} 



<pre id="hometext"><span id="hello">Hello!</span></pre> 
<div class="about" id="about"><p>hello</p></div> 

Zunächst einmal bin ich neu zu Stackoverflow. Zweitens möchte ich über einen bestimmten Teil eines Absatzes die Spanne und dann dieses div erscheinen lassen. Aber es scheint nicht zu funktionieren.

Answer 1

Ich bin mir nicht ganz sicher, ob dies gefragt ist, aber Sie können die onmouseover und onmouseout Attribute des Bereichselements verwenden.

Mit ein wenig Javascript, können Sie erreichen, was ich denke, was Sie tun möchten:

function hideDiv() { 
 
    document.getElementById("divToHide").style.visibility = 'hidden'; 
 
} 
 

 
function showDiv() { 
 
    document.getElementById("divToHide").style.visibility = 'visible'; 
 
}

#divToHide { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
} 
 

 
#hoverMe { 
 
    cursor: pointer; 
 
}

<div id="divToHide"> 
 
</div> 
 

 
<br /> 
 

 
<p> 
 
    This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box. 
 
</p>

Answer 2

Ich glaube, Sie dort einige Javascript brauchen:

function showOtherDiv() { 
 
\t document.getElementById("about").style.display = "block"; 
 
} 
 

 
function hideOtherDiv() { 
 
\t document.getElementById("about").style.display = "none"; 
 
}

#hello { 
 
    font-size: 4em; 
 
} 
 

 
div.about { 
 
    display: none; 
 
} 
 

 
#hello:hover div.about { 
 
    display: block; 
 
}

<pre id="hometext"> 
 
    <span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span> 
 
</pre> 
 

 

 
<div class="about" id="about"> 
 
    <p>hello</p> 
 
</div>

Hier ist ein codepen

Answer 3

Sie nicht Javascript verwenden haben:

#hometext:hover + #about { display:none; }