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

＆＃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;

Answer 2

＆＃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;

Answer 3

<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>

我想显示id =＆＃34; first＆＃34;的内容当鼠标悬停在id =＆＃34;可见＆＃34;

3 个答案: