CODEWITHSUNDEEP
jqueryhtmlcss
JoshK
JoshK

Reputation: 425

How to use jQuery's .hover() with a stack of divs

I have a bunch of divs inside a div that are all on top of each other. One of the divs, .play, is hidden. When the user hovers over the divs, I want the hidden div to appear.

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 Fiddle: https://jsfiddle.net/qj44o9dn/

What I want it to look like on hover: https://jsfiddle.net/qj44o9dn/

Upvotes: 1

Views: 43

Answers (2)

Tim Hultstrand
Tim Hultstrand

Reputation: 424

To build on what Sotiris wrote; You can add an handlerOut to hide the div when the cursor leaves the area:

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

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

If you don't want the mouseleave function in this case, you might want to look at the mouseenter function instead:

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

Upvotes: 3

Sotiris
Sotiris

Reputation: 40046

You can't hover something which is invisible as first notice. Secondly you have to include jQuery in your jsfiddle demo.

About your question an alternative could be to remove the visibility:hidden and play with opacity having it initially 0.

Then on hover you can change it to what you like.

https://jsfiddle.net/s9ogz1ss/

Upvotes: 2

Related Questions