Liên kết văn bản mục tiêu CSS có đường viền dưới trên di chuột, nhưng liên kết hình ảnh không có đường viền

Question

Tôi muốn có thể nhắm mục tiêu các liên kết văn bản trong CSS với phần dưới cùng khi di chuột, nhưng có tất cả liên kết là hình ảnh không có một đường viền trên di chuột. Vì vậy:

<a href="#"><img src="image.png" /></a> ==> this should not have a bottom-border on hover 
<a href="#">regular text link</a> ==> this should have a bottom-border on hover 

tôi đã cố gắng CSS này:

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a:hover img { 
    border-bottom: none; 
} 

Nhưng điều này không làm việc ... neo phải được nhắm mục tiêu chứ không phải là hình ảnh, tôi nghĩ. Tôi đã được săn quanh Google và không ai có vẻ biết làm thế nào để làm điều này ngoại trừ bằng cách nhắm mục tiêu liên kết hình ảnh với một lớp hoặc id cụ thể, hoặc sử dụng display: block.

Nhưng, tôi không thể sử dụng các giải pháp này vì nội dung nằm trong CMS nên tôi không muốn người dùng phải chỉ định lớp cho từng hình ảnh mà họ chèn. Và hiển thị: khối sẽ không hoạt động vì tôi không biết điều đó có phù hợp với mọi hình ảnh mà người dùng muốn hiển thị hay không.

Cuối cùng, tôi muốn có thể thực hiện việc này bằng CSS thuần túy (không có Javascript). Có lẽ không có cách nào ... nhưng bất kỳ trợ giúp hoặc ý tưởng nào bạn có sẽ được đánh giá cao!

Answer 1

Xin lỗi, những gì bạn muốn là một loại: lớp cha mẹ chọn con nhưng áp dụng cho phụ huynh, rất tiếc là không tồn tại (thậm chí không có trong CSS3).

Bạn cần phải thực hiện một chút Javascript, chọn tất cả các thành phần phù hợp với #sidebar a: hover, sau đó áp dụng đường viền dưới cùng màu đỏ với điều kiện là chúng không có phần tử IMG con.

Answer 2

Điều này là không thể với CSS thuần túy mà không thêm thẻ mới. Để thực hiện điều này với CSS/HTML thuần túy, bạn sẽ cần thêm thẻ vào liên kết [a href] của hình ảnh .. hoặc thêm thẻ vào liên kết [a hrer] mà bạn muốn hiển thị với gạch dưới.

Bạn có thể viết một đoạn mã nhỏ trong javascript làm thay đổi thuộc tính biên của một phần tử trên di chuột khá dễ dàng. Bạn chỉ cần kiểm tra xem phần tử có phải là IMG hay không.

Answer 3

Điều này thực sự có vẻ là một vấn đề khá khó khăn. Bạn có khả năng thay đổi mã của CMS không? Nó trở nên dễ dàng nếu bạn có thể làm một cái gì đó giống như quấn một <span> xung quanh bất kỳ văn bản bên trong liên kết (và để lại hình ảnh bên ngoài của những người). Sau đó, tất cả những gì bạn phải làm là nhắm mục tiêu #sidebar a:hover span để có đường viền.

Nếu bạn không thể thay đổi mã, tôi không chắc chắn nếu điều này là có thể. Tôi chắc chắn không thể nghĩ ra bất cứ điều gì.

Answer 4

Bạn không thể nhắm mục tiêu phần tử tùy thuộc vào yếu tố con nào, vì vậy bạn sẽ phải thêm nội dung nào đó vào mã để nhắm mục tiêu các liên kết khác nhau.

Bạn không thể sử dụng gạch dưới thay vì đường viền dưới cùng? Điều đó sẽ hoạt động vì nó được áp dụng cho văn bản trong liên kết chứ không phải chính phần tử liên kết.

#sidebar a:hover { text-decoration: underline; } 
#sidebar a:hover img { text-decoration: none; } 

Answer 5

này có thể làm việc

a img {position:relative; top: Npx}, where N is the hover border thickness 

Điều này sẽ làm cho hình ảnh bao gồm biên giới, mặc dù nó sẽ được di dời xuống một điểm ảnh hoặc lâu hơn vĩnh viễn.

Answer 6

Hãy thử mẹo này. Nó hoạt động.

a { text-decoration:none; border-bottom:2px solid; } 

a img { border:none; vertical-align:top; } 

Một cách khác - PHP:

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text); 

Answer 7

Theo như JavaScript đi, tôi muốn đề nghị sử dụng jQuery để thêm một lớp cho tất cả các liên kết có chứa một hình ảnh:

$('#sidebar a:has(img)').addClass('image-link'); 

(Bộ chọn :has là một điều jQuery; nó không có trong CSS.)

Sau đó, điều chỉnh biểu định kiểu của bạn cho phù hợp.

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a.image-link:hover { 
    border-bottom: none; 
} 

Answer 8

Có thể với css3 sử dụng a:not(img) a:hover {style:whatever;}, nhưng có những cân nhắc. Dưới đây là một lời giải thích với hình ảnh: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 9

Cách đơn giản là sử dụng

:hover (text-decoration: underline} 

Xem thêm

text-underline-position 

http://dev.w3.org/csswg/css3-text/#text-underline-position0