c# - 当鼠标悬停在 DIV 上时，如何使某些控件可见并与 DIV 重叠？

Question

我在 CSS 和 JavaScript 方面不是那么专业。我正在一个用户创建和编辑文章的文章网站上工作。目前，每当用户想要删除或编辑一篇文章时，他都会单击每个代表一篇文章的 DIV 下面给出的一些按钮。代码是这样的

<div id="article"><!-- article data --></div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
            style="height: 26px" Text="Delete" />

但我想要的是，这个删除按钮在页面加载时一定是不可见的。只有当用户将鼠标悬停在相应的 div 上时它才应该可见，并且它应该与 div 右下角的 div 重叠。请告诉我我该怎么做？

Answer 1

This uses jQuery to handle a fade in and fade out. I don't know anything about ASP or C# but maybe this will help Demo! Just hover over the black square in the bottom left corner and you'll see the delete button show up. The jQuery can be seen here:

$('.delete input').hide();
$('.delete').hover(
    function() {
        $('.delete input').fadeIn();
    }, function() {
      $('.delete input').fadeOut();
    }
);

Answer 2

如果你想让css可以看到按钮，它就像

div:hover input {visibility: visible}

这将适用于您提供的代码。当然，如果您有一个更复杂的页面，您应该使规则更具体（可能为 div 分配一个类）