Question

我有一个明显有组织的新闻源。当用户将鼠标悬停在每个项目上时，背景将突出显示。我还希望在每个项目的右上角有一个小“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;
}

非常感谢!!!!!

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

默认情况下修改要隐藏的关闭按钮，然后将鼠标悬停在列表项上时，再次在关闭按钮上设置显示。

希望这是有道理的

添

Answer 2

hide-button中的li元素并执行

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

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

否则，总会有javascript。

Answer 3

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

在悬停时显示“关闭”图标

3 个答案: