悬停时显示“关闭”图标

Posted 2023-03-06

【中文标题】悬停时显示“关闭”图标

【英文标题】：Displaying a "close" icon upon hover

【发布时间】：2011-10-16 07:51:45

【问题描述】：

我有一个新闻源，它显然是由 .当用户将鼠标悬停在每个项目上时，背景会突出显示。我还想在每个项目的右上角有一个小“x”，仅在悬停时显示。这个“x”将是删除该帖子的删除按钮。

现在我只有一些基本的 html 声明：<div class="hide-button"><a href="#">x</a></div>

我知道我不想在 html 中显示“x”，而是在 CSS 中显示它。所以我有下面的<li> css 用于悬停，以及用于隐藏按钮的 CSS。我想知道将隐藏按钮 div 集成到 <li> 的最佳方法

.hide-button 
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: gray;


.hide-button a
    text-decoration: none;
    color:gray;


.hide-button a:hover 
    text-decoration: underline;
    color:gray;

还有名单：

.newsfeedlist li 
    background: white;
    border-bottom: 1px solid #E4E4E4;
    padding: 12px 0px 12px 0px;
    overflow: hidden;


.newsfeedlist li:hover 
    background-color: #F3F3F3;

非常感谢！！！！！！

【问题讨论】：

你能添加你的 HTML 吗？ jsFiddle demo 您目前所拥有的内容也会有所帮助。

当然，等一下

【参考方案1】：

假设您的删除按钮位于另一个容器中，您可以执行类似的操作

.hide-button 
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: tray;
    display: none;


... the other bits of CSS ...

.newsfeedlist li:hover .hide-button 
    display: block;

将关闭按钮修改为默认隐藏，然后在将鼠标悬停在列表项上时，您再次将显示设置回关闭按钮上。

希望这是有道理的

提姆

【讨论】：

你是一个超人的蒂姆，谢谢。非常简单的解决方案，但效果很好。非常感谢！！！！

没问题。不要忘记标记答案，以便其他人可以看到此问题已得到解答。蒂姆。

【参考方案2】：

你可能真的需要这个： Demo at jsFiddle.net 我修改了一个示例，并将其用于多个内容区域或图像。

【讨论】：

我添加了关闭图标单击以隐藏父容器的事件：请参阅 [jsfiddle.net/DrkwB/4/]

的演示

【参考方案3】：

但是li中的hide-button元素并做

.newsfeedlist li:hover .hide-button 
    display: inline-block;

并将display: none; 添加到.hide-button

否则，总是有 javascript。

【讨论】：

谢谢！和上面一样，还有一个原因：D