Vurguluyuz "close" simgesinin görüntülenmesi

Question

Açıkça düzenlenmiş bir haber kaynağım var. Kullanıcı öğelerin her birinin üzerine geldiğinde, arka plan vurgulanır. Ayrıca, her öğenin sağ üst köşesinde küçük bir "x" harfi olmasını da istiyorum. Bu "x", bu gönderiyi kaldırmak için bir sil düğmesi olacaktır.

Şu anda sadece bazı temel html belirten vardır: <div class="hide-button"><a href="#">x</a></div>

ben html görüntülenen "x" istemediğini biliyorum ama doğrusu CSS içinde var. Bu yüzden, gezinme için <li> css'nin yanı sıra gizleme düğmesi için CSS'ye sahibim. Ben <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; 
} 

ve listeye sakla düğmesi div entegre etmek iyi yöntem bilmek istiyorum:

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

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

Çok teşekkür ederim !!!!!

Answer 1

varsayarsak Silme düğmeleri varsayılan olarak ve daha sonra gizli bir liste öğesinin üzerine gelerek yaparken kapanırken tekrar ekrana ayarlanması kapatma düğmesini değiştirme

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

gibi bir şey yapabileceğini başka bir kaba içerde buton. Demo at jsFiddle.net Ben bir örnek modifiye ve birden fazla içerik alanları veya görüntüler için o kadar tushed:

Umut bu anlamda

Tim

Answer 2

Ama li içinde hide-button eleman ve

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

yapmak ve Aksi takdirde, her zaman javascript var display: none;

.hide-button ekleyin.

Answer 3

Gerçekten bu ihtiyacı olabilir yapar.