Mostrar un ícono "cerrar" al colocar el cursor sobre el elemento

Question

Tengo un suministro de noticias que obviamente está organizado por un. Cuando el usuario pasa sobre cada uno de los elementos, el fondo se resalta. También me gustaría tener una pequeña "x" en la esquina superior derecha de cada artículo, que solo se muestra cuando está suspendida. Esta "x" sería un botón para eliminar esa publicación.

En este momento acabo de tener algo de HTML básico que indica: <div class="hide-button"><a href="#">x</a></div>

sé que no quiero que la "x" que aparece en el html, sino más bien tener en el CSS. Así que tengo el css <li> a continuación para desplazarse, así como el CSS para el botón ocultar. Me gustaría saber el mejor método para integrar el botón de ocultación div en el <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; 
} 

y la lista:

.newsfeedlist li { 
    background: white; 
    border-bottom: 1px solid #E4E4E4; 
    padding: 12px 0px 12px 0px; 
    overflow: hidden; 
} 

.newsfeedlist li:hover { 
    background-color: #F3F3F3; 
} 

Muchas gracias !!!!!

Answer 1

presumiendo sus botones Borrado dentro de otro contenedor que podría hacer algo como

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

Modificar el botón de cierre que se oculta de forma predeterminada y luego al pasar el cursor sobre un elemento de la lista activa la visualización de nuevo en la estrecha botón.

la esperanza que esto tiene sentido

Tim

Answer 2

Pero hide-button elemento en el li y hacer

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

y añadir display: none;-.hide-button

De lo contrario, siempre hay javascript.

Answer 3

Es posible que realmente estar en necesidad de ello: Demo at jsFiddle.net he modificado un ejemplo y tushed arriba para múltiples áreas de contenido o imágenes.