我想显示id =" first"的内容当鼠标悬停在id ="可见"

时间:2016-08-11 05:57:57

标签: html css hover

<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

执行此操作

3 个答案:

答案 0 :(得分:3)

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

                 #first{ display:none;  }  /* hidden initially...                */
#visible:hover + #first{ display:block; }  /* show on #visible hover             */
&#13;
<div id="visible">  HOVER ME!</div>
<div id="first"><span class="bob">Flatkit</span></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

#first{display:none;}
#visible:hover + #first{ display:block; }
.one{
  width:100px;
  height:100px;
  text-align:center;
  border:1px solid red;
}
.two{
  width:100px;
  height:100px;
  text-align:center;
  border:1px solid blue;
  margin-left:5px;
}
&#13;
<div id="visible" class="one"> Visible </div>
<div id="first" class="two"><span class="bob">Next Div</span></div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

<html>
<head>
<style>
	#first
	{
		display:none;
	}
	#visible:hover ~ #first
	{
		display:inline-block;
	}
</style>
</head>
<body>
<div id="visible" style="float:left;">
    Hello           
</div>
<div id="first" style="float:left;">
    <span class="bob">Flatkit</span>        
</div>

</body>
</html>