如何将 jQuery 的 .hover() 与一堆 div 一起使用答案

【问题标题】：How to use jQuery's .hover() with a stack of divs如何将 jQuery 的 .hover() 与一堆 div 一起使用
【发布时间】：2015-06-20 22:38:57
【问题描述】：

我在一个 div 中有一堆 div，它们都在彼此之上。其中一个 div，.play，是隐藏的。当用户将鼠标悬停在 div 上时，我希望隐藏的 div 出现。

HTML

<div class="preview">
       <a href="blackJack.html">
        <div class="gamePreview" id="blackJack"></div>
        <div class="gameName"></div>
        <div class="play">
            <img src="playbutton.png" />
        </div>
        <h3>Blackjack</h3>
        </a>
</div>

CSS

.preview {
    display: inline-block;
    width: 30%;
    margin-left: 2%;
    position: relative;
}

.gamePreview {
    height: 280px;
    margin-top: 40px;
    background-color: lightgrey;
    border: 1px solid darkslategrey;
}

.gameName {
    background-color: #494949;
    height: 150px;
    opacity: 0.5;
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.play {
    background-color: darkslategrey;
    opacity: .5;
    clear: both;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 87.5%;
    width: 100%;
    visibility: hidden;
}

.play img {
    height: 50px;
    width: 50px;
    padding-top: 110px;
    padding-left: 160px;
}


.preview h3 {
    clear: both;
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    font-family: Arial;
    font-size: 30px;
    color: white;
    opacity: .8;
    padding-left: 5%;
}

JQuery

$(document).ready(function(){
            $(".play").hover(function(){
                $(".play").css("visibility", "visible");
            });
        });

JS 小提琴：https://jsfiddle.net/qj44o9dn/

我希望它在悬停时的样子：https://jsfiddle.net/qj44o9dn/

【问题讨论】：

我认为两个 JS Fiddle 链接是一样的... :)

标签： jquery html css

【解决方案1】：

以 Sotiris 所写的内容为基础；您可以添加一个 handlerOut 以在光标离开该区域时隐藏 div：

https://jsfiddle.net/s9ogz1ss/1/

$(".play").hover(function () {
    $(".play").css("opacity", "0.5");
}, function () {
    $(".play").css("opacity", "0");
});

如果您在这种情况下不需要 mouseleave 函数，则可能需要查看 mouseenter 函数：

https://api.jquery.com/mouseenter/

【讨论】：

【解决方案2】：

您不能悬停在第一次通知时不可见的东西。其次，您必须在 jsfiddle 演示中包含 jQuery。

关于您的问题，另一种选择可能是删除 visibility:hidden 并使用 opacity 最初使用 0。

然后在悬停时，您可以将其更改为您喜欢的。

https://jsfiddle.net/s9ogz1ss/

【讨论】：