html - 当鼠标悬停在 id ="first"上时，我想显示 id ="visible"的内容

Question

<div id="visible" style="float:left;">
    <img src="image1.jpg"  id="boom">            
</div>

<div id="first" style="float:left; ">
    <span class="bob">Flatkit</span>        
</div>

我尝试了以下代码，但它没有帮助我。

#visible #first:hover ~ #visible>#first
{
    display:inline-block;
}

#visible :hover >#first
{
    display:inline-block;
}

#visible :hover + #first
{
   display: inline-block;
}

如果有人能帮助我就太好了。我知道它可以使用 JavaScript 来完成，但我想使用 CSS3 来执行它

Answer 1

#visible, #first{ float: left;}            /* use stylesheets! not inline styles */

                 #first{ display:none;  }  /* hidden initially...                */
#visible:hover + #first{ display:block; }  /* show on #visible hover             */

<div id="visible">  HOVER ME!</div>
<div id="first"><span class="bob">Flatkit</span></div>