css a: văn bản kiểu liên kết và hình ảnh

Question

Tôi có một câu hỏi css nhanh chóng làm tôi thất vọng, và tôi dường như không thể tìm ra ngay bây giờ.

Tôi đã tạo kiểu cho các liên kết trên trang của mình có viền dưới cùng trên di chuột, nhưng đường viền dưới cùng cũng xuất hiện trên hình ảnh có liên kết và tôi không thể tìm cách ngăn đường viền xuất hiện trên hình ảnh.

Đây là những gì tôi hiện có.

#main a:hover { 
    border-bottom:solid 1px #7b9a04; 
    color:#333; 
} 

img, img a:hover { 
    border-bottom:none; 
} 

Tuy nhiên, điều này dường như không hoạt động. Tôi không nghĩ rằng bất kỳ phong cách nào khác của nó sẽ ghi đè nó, bởi vì nếu tôi xóa #main a: hover kiểu hình ảnh không còn có đường viền dưới cùng, nhưng không có liên kết nào khác trên trang web thực hiện.

Answer 1

Vấn đề với phần tử liên kết <a>, không phải với chính liên kết hình ảnh. Khi bạn chỉ định đường viền dưới cùng cho trạng thái di chuột của <a>, nó cũng áp dụng cho liên kết chứa hình ảnh. Vì vậy, khi bạn di chuột vào một liên kết (chứa một hình ảnh), đó là liên kết hiển thị đường viền dưới cùng. Không phải hình ảnh.

Có một bản sửa lỗi cho điều này. Thử áp dụng:

a img { 
    display: block; 
    } 

Điều này sẽ đặt lại kiểu dáng <a>. Có một báo trước cho phương pháp này — sử dụng phương pháp này với hình ảnh nội tuyến có thể làm hỏng bố cục. Vì vậy, sử dụng nó một cách tiết kiệm.

Answer 2

Theo css specificity, nó sẽ hoạt động miễn là bạn đặt đường viền hình ảnh css sau css khác.

Là một sang một bên không cần phải có p và td tách ra như thế.

#main a { 
    color:#7b9a04; 
    text-decoration:none; 
} 

#main a:hover { 
    color:#333; 
    border-bottom:solid 1px #7b9a04; 
} 

Thực sự là tất cả những gì bạn cần.

Answer 3

điều gì về việc xác định rõ ràng hình ảnh không có đường viền, sau khi khai báo di chuột?

#main a:hover { 
    border-bottom: solid 1px #7b9a04; 
} 

img { 
    border: none; 
} 

Answer 4

Làm thế nào về

a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover { 
     text-decoration: none; 
     border: 0; 
     border: none; 
     }