Hiển thị biểu tượng "đóng" khi di chuột

Question

Tôi có nguồn cấp tin tức được sắp xếp bởi một. Khi người dùng di chuột qua từng mục, nền sẽ được tô sáng. Tôi cũng muốn có một "x" nhỏ ở góc trên cùng bên phải của mỗi mục, chỉ hiển thị khi được di chuột. "X" này sẽ là nút xóa để xóa bài đăng đó.

Ngay bây giờ tôi chỉ có một số html cơ bản trong đó nêu: <div class="hide-button"><a href="#">x</a></div>

tôi biết rằng tôi không muốn "x" hiển thị trong html, nhưng thay vì có nó trong CSS. Vì vậy, tôi có mã số <li> dưới đây để di chuột, cũng như CSS cho nút ẩn. Tôi muốn biết phương pháp tốt nhất để tích hợp các nút ẩn div vào <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; 
} 

và danh sách:

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

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

Cảm ơn bạn rất nhiều !!!!!

Answer 1

Giả nút delete của bạn đang ở trong thùng chứa khác, bạn có thể làm một cái gì đó giống như

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

Sửa đổi nút đóng được ẩn theo mặc định và sau đó khi lơ lửng trên một mục danh sách bạn thiết lập màn hình trở lại trên mức đóng cửa nút.

Hy vọng điều này có ý nghĩa

Tim

Answer 2

Nhưng hide-button phần tử trong li và làm

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

và thêm display: none;-.hide-button

Nếu không, luôn có javascript.

Answer 3

Bạn thực sự có thể có nhu cầu này: Demo at jsFiddle.net tôi sửa đổi một ví dụ và tushed nó lên cho nhiều lĩnh vực nội dung hoặc hình ảnh.