如何使用jQuery的.hover（）與一疊divs

Question

我有一堆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

要建立在什麼索蒂里斯寫的;你可以添加一個handlerOut隱藏div時光標離開該地區：

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

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

如果你不想在這種情況下，鼠標離開功能，你可能想看看的mouseenter功能而不是：

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

Answer 2

你可以不叮無縫的東西是作爲第一通知看不見的。其次，你必須在你的jsfiddle演示中包含jQuery。

關於你的問題一個替代方案可能是刪除visibility:hidden並與opacity一起玩它0。

然後在懸停你可以改變它到你喜歡的。

https://jsfiddle.net/s9ogz1ss/