如何在div鼠标悬停时显示按钮

Question

我想在div悬停上显示按钮.当我将鼠标悬停在div上时,按钮显示否则隐藏.

divbuttondiv中的按钮.

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 */
}

演示

另外,还要确保你分配一些height或者min-height你的div元素,否则这将是0因为它不持有任何内容.另外,不要使用display: none;内联样式,因为内联样式具有最高的特异性,因此,您将被迫使用!important哪个是坏的.

在上面的示例中,我使用button {/*Styles*/}但是这是一个通用元素选择器,因此请确保class为button元素定义a .

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';
}