css - 親divにカーソルを合わせたときにのみ、div内に画像を表示する方法は?

Question

<div class="spotlight-item width-2 height-2">
    <a href="#" class="spotlight-info">
        <h2 class="large">
        Random text
        </h2>
    </a>

    <img src="../images/background.jpg"> //actual image

    <a href="#" onClick="alert(111)">      
        <img class="play-button" src="<%THEME%>images/play.png" style="width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; display: none;">
    </a>
</div>

再生ボタン クラスを含む画像は、display: none; に設定されています。デフォルトで。ただし、ユーザーが "spotlight-item" div にカーソルを合わせると、再生ボタンの画像は display: show; に設定する必要があります。

これどうやってするの？

Answer 1

.spotlight-item:hover .play-button { display: x; } 

x = インライン、ブロック、インライン ブロック

Answer 2

自分で解決しました。

/* play button */
.spotlight-area .spotlight .spotlight-item img.play-button {
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; 
visibility: hidden;

}

/* play button hover */
.spotlight-area .spotlight .spotlight-item:hover img.play-button {
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; 
visibility: visible;
}

Answer 3

<style type="text/css">
    .play-button {
        width: 100px; 
        height: 100px; 
        margin-top: 30%; 
        margin-left: 40%; 
        display: none;
    }
    .spotlight-item:hover .play-button {
        display: block;
    }
</style>
<div class="spotlight-item width-2 height-2">
    <a href="#" class="spotlight-info">
        <h2 class="large">
        Random text
        </h2>
    </a>

    <img src="../images/background.jpg"> //actual image

    <a href="#" onClick="alert(111)">      
        <img class="play-button" src="<%THEME%>images/play.png">
    </a>
</div>

Answer 4

.spotlight-item       > img { visibility: hidden  }
.spotlight-item:hover > img { visibility: visible }

このvisibilityプロパティは、要素が表示されていない場合でも、要素用のスペースを確保します。これにより、レンダリングされた要素が飛び回るのを防ぎます。

警告::hoverポインターレス デバイスでは、使用のみにアクセスできません。

Answer 5

いくつかの CSS ルールを追加するだけです。例：

.someClass:hover img {
    display:block;
}

これにより、すべて<img>の内部.someClass要素が表示されます。

Answer 6

これを試して ：-

.spotlight-item:hover .play-button
{
  display:block;
}