Question

我在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/

Answer 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/

Answer 2

你不能将第一次看不见的东西悬停在上面。其次，你必须在你的jsfiddle演示中包含jQuery。

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

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

https://jsfiddle.net/s9ogz1ss/

如何使用jQuery的.hover（）与一堆div

2 个答案: