1

埋め込まれた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>

ヒントをありがとう

4

3 に答える 3

3

可能であれば、マークアップを少し変更することをお勧めします。やりたいことができるようになります。

オプション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/

于 2013-09-03T09:38:38.093 に答える
2

親要素にカーソルを合わせると、それが機能するように見えます。

div.overlay:hover {
    visibility: visible;
}

フィドル: http://jsfiddle.net/52sM5/

于 2013-09-03T09:43:23.933 に答える
0

あなたの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;}
于 2013-09-03T11:47:41.537 に答える