css - 在嵌入的 div 悬停时显示 div

Question

我正在尝试在嵌入式 div.box 悬停时显示 div.overlay

div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.box:hover div.overlay { visibility: visible;}

<div class="overlay">
<div class="box">Info about a game</div>
Play
</div>

感谢您的任何提示

Answer 1

如果可能，我建议您稍微更改标记。这将使您可以做您想做的事情。

选项1：

HTML

<div class="box">Info about a game</div>
<div class="overlay">Play</div>

CSS

div.box,
div.overlay {
  width: 100px; 
  background: #FF0; }

div.overlay { display: none; }

div.box:hover + div.overlay { display: block; }

见小提琴：http: //jsfiddle.net/3uM49/

选项 2

HTML

<div class="box">
    Info about a game
    <div class="overlay">Play</div>
</div>

CSS

div.box {
  width: 100px; 
  background: #FF0; }

div.overlay { display: none; }

div.box:hover div.overlay { display: block; }

见小提琴：http: //jsfiddle.net/kgXDT/

Answer 2

You could hover on the parent element and that seems to make it work e.g:

div.overlay:hover {
    visibility: visible;
}

Fiddle: http://jsfiddle.net/52sM5/

Answer 3

用我的 css 复制并替换你的 css

div.overlay {padding:5px; background:#F00; width:100px; visibility: hidden;}
div.box {display:block; background:#FF0; width:100px; visibility:visible;}
div.overlay:hover { visibility: visible;}