当鼠标悬停在 DIV 上时，如何使某些控件可见并与 DIV 重叠？ [关闭]

Posted 2023-05-09

【中文标题】当鼠标悬停在 DIV 上时，如何使某些控件可见并与 DIV 重叠？ [关闭]

【英文标题】：How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

【发布时间】：2012-12-20 07:22:20

【问题描述】：

我在 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 重叠。请告诉我该怎么做？

【参考方案1】：

这使用 jQuery 来处理淡入和淡出。我对 ASP 或 C# 一无所知，但也许这会对 Demo 有所帮助！只需将鼠标悬停在左下角的黑色方块上，您就会看到删除按钮出现。可以在这里看到 jQuery：

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

【讨论】：

它在我将鼠标悬停在<div class="delete"> 上时可见，并且仅当我在css 中启用border: 1px solid black; 时才有效。但是我希望当我将鼠标悬停在<div class="article"> 上并且没有在css中设置边框属性时它应该是可见的。我应该如何做到这一点？

@ShivaPareek 使用为您提供示例的代码并自行解决。不要指望这里为你编程的所有细节。之后，如果你有什么问题，回来问他。

湿婆，你不需要边框。如果您注释掉 CSS，则该区域将从视图中“隐藏”。我会推荐一个较小的不透明度，以便管理员可以实际看到该按钮。如果您希望它在有人进入 .article 元素时立即可见，那么只需更改 jQuery，特别是 $( **'.delete'** ).hover

好的，谢谢@djthoms，这对我有用。标记为答案。 :)

【参考方案2】：

如果你想让按钮被css可见，它会像

div:hover input visibility: visible

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