ホバー上に「閉じる」アイコンを表示する

Question

私は明らかにニュース提供者です。ユーザーが各項目の上を移動すると、背景が強調表示されます。私はまた、各アイテムの右上隅に小さい "x"を表示したいと思います。この "x"はその投稿を削除するための削除ボタンになります。

は、今私はいくつかの基本的なHTML述べてあります<div class="hide-button"><a href="#">x</a></div>

私はHTMLで表示された「X」を望んでいないことを知っているのではなく、CSSでそれを持っています。だから私はホバリングのために以下の<li> CSSと、hideボタンのCSSを持っています。私は<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; 
} 

とリストに非表示ボタンのdivを統合するための最良の方法を知りたい：

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

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

はありがとうございました!!!!!

Answer 1

はあなたが近くに再びディスプレイを設定し、リスト項目の上にホバリング時に、デフォルトでは非表示とするように閉じるボタンを変更

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

ような何かを行うことができ、別の容器の内側にありますボタン。

希望これが意味

ティム

Answer 2

しかしliでhide-button要素とは

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

を行うと、それ以外の場合は、常にジャバスクリプトがあります display: none;

.hide-buttonに追加します。あなたの[削除]ボタンを仮定

Answer 3

を作るあなたは本当にこれの必要性であるかもしれない： Demo at jsFiddle.net 私は例を変更し、複数のコンテンツ領域や画像のためにそれをtushed。