如何将鼠标悬停在 span 上以显示 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>

首先，我是Whosebug的新手。其次，我想超过一个段落的特定部分，跨度，然后让这个 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() {
 document.getElementById("about").style.display = "block";
}

function hideOtherDiv() {
 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>

这是一个codepen

Answer 3

您不必使用 javascript:

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

如何将鼠标悬停在 span 上以显示 div？

How do I hover over span to let a div appear?

html

css

popover