divを表示させるにはどのようにスパン上にマウスを置くのですか？

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> 

まず、私は新しいstackoverflowです。第二に、私は段落の特定の部分、スパンに行きたいし、このdivを表示させます。しかし、うまくいきません。

Answer 1

あなたが求めているのかどうかは分かりませんが、span要素のonmouseoverとonmouseout属性を利用できます。

のjavascriptの少しで、あなたは私はあなたがやりたいと思うものを達成することができます

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

私はあなたがそこにいくつかのjavascript必要があると思う：

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>

を

ここ

はJavaScriptを使用するように持っていけないcodepen

Answer 3

です：

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