<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
执行此操作答案 0 :(得分:3)
#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;
答案 1 :(得分:1)
#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;
答案 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>