html中图标悬停,html – 悬停时显示“关闭”图标

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

}

非常感谢！！！！！