显示“关闭”悬停时的图标
我有一个新闻源，显然是由 组织的。当用户将鼠标悬停在每个项目上时，背景会突出显示。我还想在每个项目的右上角有一个小“x”，仅在悬停时显示。这个“x”是一个删除按钮，用于删除该帖子。
现在我只有一些基本的 html 说明：
I知道我不希望“x”显示在 html 中，而是将其显示在 CSS 中。所以我有下面的
.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;
}
非常感谢！！！！
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button"><a href="#">x</a></div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <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;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
假设您的删除按钮位于另一个容器内，您可以执行以下操作：
将关闭按钮修改为默认隐藏，然后将鼠标悬停在列表项上时，将显示设置回关闭按钮。
希望这是有道理的
蒂姆
Presuming your delete buttons are inside another container you could do something like
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
但是
li中的hide-button元素并添加
display: none;到.hide-button否则，总是有 javascript。
But
hide-buttonelement in theliand doand add
display: none;to.hide-buttonOtherwise, there's always javascript.
你可能真的需要这个：
jsFiddle.net 上的演示
我修改了一个示例并将其添加到多个内容区域或图像。
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.