CSS- liên kết đến một biểu tượng hiển thị khi di chuột

Question

Tôi có một biểu tượng mà tôi hiển thị ở trên cùng, bên phải của một div khi di chuột qua div. Mã của tôi là như thế này:

<div class='edit_hover_class'> 
    <!-- some code --> 
</div> 

Và file css tương ứng chứa:

.edit_hover_class:hover { 
    background: url("trash.gif") no-repeat scroll right top; 
} 

Tôi muốn đính kèm một liên kết đến biểu tượng chỉnh sửa, là nó có thể với css đơn giản? Nếu vậy, làm thế nào?

Answer 1

Bạn có thể ẩn một liên kết cho đến khi di chuột như vậy:

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

.edit_hover_class a{ 
    visibility:hidden; 
} 
.edit_hover_class:hover a { 
visibility:visible; 
} 

Xem jsfiddle:

http://jsfiddle.net/Auzm5/

Hoặc nếu bạn chỉ muốn vào biểu tượng liên kết, sử dụng CSS visibility:

http://jsfiddle.net/Auzm5/1/

Answer 2

tôi havent thử nghiệm này, nhưng nó đáng để thử:

HTML

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

CSS

.edit_hover_class a { 
    pointer-events: none; 
    cursor: default; 
} 

.edit_hover_class a:hover { 
    pointer-events: auto; 
    cursor: pointer; 
}