如何在div鼠標懸停時顯示按鈕

Question

我想在 div 懸停時顯示按鈕。 當我將鼠標懸停在 div 上時，按鈕顯示否則隱藏。

我在divbutton div 中的按鈕。

html

<div class="divbutton">
   <button type="button" style="display: none;">Hello</button>
</div>

當我將鼠標懸停在 div 上時，它應該顯示，但我不知道該怎么做。 當我再次刪除鼠標按鈕時隱藏。 謝謝。

Answer 1

使用下面的選擇器

button {
  display: none; /* Hide button */
}

.divbutton:hover button {
   display: block; /* On :hover of div show button */
}

演示

還要確保為div元素分配一些height或min-height ，否則它將為0因為它不包含任何內容。 另外，不要使用display: none; 作為內聯樣式，因為內聯樣式具有最高的特異性，因此，您將被迫使用!important ，這是不好的。

在上面的示例中，我使用了button {/*Styles*/}但這是一個通用的元素選擇器，因此請確保為button元素定義一個class 。

Answer 2

使用以下 jQuery 來執行您的任務。

這是一個jsfiddle演示

$(document).ready(function () {
    $(document).on('mouseenter', '.divbutton', function () {
        $(this).find(":button").show();
    }).on('mouseleave', '.divbutton', function () {
        $(this).find(":button").hide();
    });
});

Answer 3

Alien 先生的回答提供了一個很好的 CSS 實現。 如果你需要在 jquery 中，使用這個 -

$( ".divbutton" )
 .on("mouseenter", function() {
  $("button").show();
})
.on("mouseleave", function() {
  $("button").hide();
});

在純 JavaScript 中 -

var buttonDiv = document.getElementsByClassName("divbutton")[0];  //better use some id and then use getElementById

buttonDiv.onmouseover = function() {
    document.getElementById("YourButtonId").style.display = 'block';
}

buttonDiv.onmouseout = function() {
    document.getElementById("YourButtonId").style.display = 'none';
}

Answer 4

試試這個：

$('.divbutton').mouseover(function(event)
{
   $(this).find('button').show();
});

$('.divbutton').mouseout(function(event)
{
   $(this).find('button').hide();
});

Answer 5

首先隱藏具有轉換屬性的按鈕。

button{
transform:translate(100%,100%)
//this will move the button right and buttom
}

然后當你懸停在 div 上時，你把它帶回來

.divbutton:hover button{
     //class name should have been divButton
     transform:translate(0,0)}