JQuery在鼠標懸停的另一個DIV上顯示DIV

我知道這可能有一個簡單的解決方案，但我是Jquery noob。請幫忙。如何在鼠標懸停的其他DIV上顯示DIV？JQuery在鼠標懸停的另一個DIV上顯示DIV

例子，我有這樣的：

<div class="box"> Info about a game </div>

我要「覆蓋」在格「盒子」

<div class="overlay"> Play </div>

我如何能做到這一點與jQuery另一個DIV？

對不起，提前謝謝！

來源

2012-04-10 DavidF

如果我理解正確，則只需在box上懸停時顯示overlay。

你可以使用CSS僞:hover：

<div class="box"> 
    Info about a game 
    <div class="overlay"> Play </div> 
</div> 

div.box div.overlay 
{ 
    display:none; 
} 

div.box:hover div.overlay 
{ 
display:block; 
}

http://jsfiddle.net/Curt/BC4eY/

如果您希望使用的動畫/ jQuery來顯示/隱藏overlay您可以使用以下方法：

$(function(){ 
    $(".box").hover(function(){ 
     $(this).find(".overlay").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".overlay").fadeOut(); 
        } 
        );   
});

http://jsfiddle.net/Curt/BC4eY/2/

來源

2012-04-10 11:16:33 Curt

是的，你是正確的。但與所有瀏覽器兼容嗎？ – DavidF 2012-04-10 11:19:39

@Splugged它與大多數瀏覽器兼容http://www.quirksmode.org/css/contents.html – Curt 2012-04-10 11:28:19

@Splugged查看我的編輯。我也提供了一個動畫jQuery版本。 – Curt 2012-04-10 11:31:07

您可以使用另一個DIV元素，其類別爲'about'，它將位於您想要的位置。並將有CSS樣式：不透明度：0;

在JS

然後，你必須寫小劇本，將在onload事件位於/就緒功能，類似的東西：

$(document).ready(function() { 
    $('div.box').hover(function() { 
    $(this).children('.overlay').fadeIn(); 
    }, function() { 
    $(this).children('.overlay').fadeOut(); 
    }); 
});

如果該元素將在頂部覆蓋的東西，那麼最好是使用CSS屬性'display：none'來防止這個透明元素接管鼠標事件。

來源

2012-04-10 11:19:14 moka

如果頁面上有多個「box」，這將不起作用。改用'$（this）'。看到我的答案http://stackoverflow.com/a/10087695/370103 – Curt 2012-04-10 11:31:56

這不是確切的代碼，只是例如如何做到這一點。如果用戶需要顯示/隱藏多個DIV元素，那麼他保持這種方式，如果他需要更具體的，他可以走你的路或更具體的使用jQuery選擇器選擇對象，例如使用ID而不是CLASS。 – moka 2012-04-10 11:41:49

以下是使用原生JavaScript（不需要jQuery庫）的方法。如果你不使用ES6你可以用普通的舊function expressions更換arrow functions：

var box = document.getElementById("box"); 
 
var overlay = document.getElementById("overlay"); 
 

 
var init =() => { 
 
    overlay.style.display = 'none'; //hide by default when page is shown 
 

 
    box.addEventListener('mouseover',() => { 
 
    overlay.style.display = 'inline'; 
 
    }); 
 

 
    box.addEventListener('mouseout',() => { 
 
    overlay.style.display = 'none'; 
 
    }); 
 
}; 
 

 
init();

<div id="box"> Info about a game<br /> 
 
    <div id="overlay">Play</div> 
 
</div>

來源

2017-10-23 18:01:40 tommyO

JQuery在鼠標懸停的另一個DIV上顯示DIV

回答

相關問題