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

您可以将鼠标悬停在父元素上，这似乎可以使其工作，例如：

div.overlay:hover {
    visibility: visible;
}

小提琴：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;}

在嵌入div的悬停时显示div

3 个答案: