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

Demo

另外，请务必为height元素分配一些min-height或div，否则它将为0，因为它不包含任何内容。另外，不要使用display: none;作为内联样式，因为内联样式具有最高的特异性，因此，您将被迫使用!important这是不好的。

在上面的示例中，我使用的是button {/*Styles*/}，但这是一般的元素选择器，因此请务必为class元素定义button。

Answer 2

使用以下jQuery来执行您的任务。

这是jsfiddle demo

$(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

首先隐藏具有transform属性的按钮。

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)}

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

5 个答案: