html - 悬停时显示 "close"图标

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

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

希望这是有道理的

蒂姆