Displaying a "close" icon upon hover

Question

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!!!!!

Answer 1

Presuming your delete buttons are inside another container you could do something like

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

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

Answer 2

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.

Answer 3

But hide-button element in the li and do

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

and add display: none; to .hide-button

Otherwise, there's always javascript.