懸停時顯示「關閉」圖標

我有一個顯然由an組織的新聞源。當用戶將鼠標懸停在每個項目上時，背景將突出顯示。我還想在每個項目的右上角有一個小的「x」，只有在徘徊時才顯示。這個「x」將是刪除該帖子的刪除按鈕。懸停時顯示「關閉」圖標

現在我只是有一些基本的HTML聲明：<div class="hide-button"><a href="#">x</a></div>

我知道，我也不想在HTML中顯示的「X」，而是有它的CSS。所以我有下面的<li> css懸停，以及隱藏按鈕的CSS。我想知道最好的方法來隱藏按鈕DIV融入<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; 
}

和名單：

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

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

謝謝你這麼多!!!!!

來源

2011-07-29 sthomps

你可以添加你的HTML嗎？到目前爲止你所擁有的[jsFiddle demo]（http://jsfiddle.net/）也會有所幫助。 – thirtydot

當然，給我一秒 – sthomps

意味着你的刪除按鈕是另一容器內，你可以做類似

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

修改關閉按鈕默認，然後被隱藏在一個列表項徘徊，當你在接近回重新設置顯示器按鈕。

希望這是有道理

添

來源

2011-07-29 22:58:54

你是一個超人蒂姆，謝謝。非常簡單的解決方案，但完美。非常感謝！！！！ – sthomps

沒問題。不要忘記標記答案，以便其他人可以看到此問題已得到解答。蒂姆。 –

是的，我必須等5分鐘才能這樣做。現在應該做。 Tx – sthomps

但在lihide-button元素，並做

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

，並添加display: none;到.hide-button

否則，總是有JavaScript的。

來源

2011-07-29 22:58:52

謝謝！同上，原因是：D – sthomps

你真的有可能需要這樣的： Demo at jsFiddle.net 我修改了一個例子，tushed它爲多個內容區域或圖像。

來源

2012-05-16 11:17:04 Peter

我添加了關閉圖標的點擊事件以隱藏父容器：請參見[http://jsfiddle.net/DrkwB/4/]上的演示。 – Peter

懸停時顯示「關閉」圖標

回答

相關問題