如何仅在悬停时显示？答案

【问题标题】：How to only display when hover?如何仅在悬停时显示？
【发布时间】：2013-11-15 05:02:50
【问题描述】：

当您将鼠标悬停在图像上时，我想显示一个播放按钮。这是我的 HTML：

<a href="bekijk.php?film_id=2014">
    <div class="geheel">
        <h3>Text</h3>
        <div class="vidimg" style="background-size:200px 110px; height:110px; width:200px; 
        background-image: url(img/film/2014.png);">
            <div class="playknop" style="height:100px;width:200px;">
                Playbutton
            </div>
        </div>
    </div>
</a>

这是我的 CSS：

.playknop                   {display:none;}

.playknop:hover + .playknop {display:block;}

.geheel                     {width:200px;}

它不工作。有没有人知道为什么？谢谢。

【问题讨论】：

你不能将鼠标悬停在不可见的东西上……
目前您为按钮定义了悬停效果，而不是图像。
您不应该将一些 CSS 内联而另一些放在单独的文件中。将它们全部放在一个单独的文件中。

标签： html css hover

【解决方案1】：

您可以为此使用 javascript，也可以为此使用 z-index

【讨论】：

怎么样？这没有回答问题

【解决方案2】：

我尝试只用 css 为你做一些事情，它可以工作，但你应该随意订购它。

您可以在此处查看示例： http://jsfiddle.net/SLB4S/1/

当您将图像悬停时，播放按钮会弹出

div#hoverMe:hover > #playBtn{
    display: block;
}

【讨论】：

如果回答好，请点赞让别人欣赏。