CSS- target text links with bottom border on hover, but image links with no border

CSS- target text links with bottom border on hover, but image links with no border

水水月牙 发布于 2021-11-29 字数 1235 浏览 730 回复 9 原文

I'd like to be able to target text links in CSS with border-bottom on hover,
but have all links that are images not have a border on hover. So:

<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

I tried this CSS:

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

But this doesn't work...the anchor has to be targeted rather than the image, I think. I've been hunting around Google and no one seems to know how to do this except by targeting the image link with a specific class or id, or using display:block.

But, I can't use these solutions since the content is in a CMS so I don't want the user to have to assign a class to each image they insert. And display:block won't work because I don't know if that would be appropriate for every image the user wants to display.

Finally, I'd like to be able to do this in plain CSS (no Javascript). Perhaps there's no way...but any help or ideas you have would be greatly appreciated!

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

娇女薄笑 2022-06-07 9 楼

This actually seems to be a pretty difficult problem. Do you have any ability to change the CMS's code? It becomes easy if you can do something like wrap a <span> around any text inside links (and leave images outside of those). Then all you have to do is target #sidebar a:hover span to have the border.

If you can't change the code, I'm not sure if this is possible. I sure can't come up with anything.

雾里花 2022-06-07 8 楼

This is not possible with pure CSS without adding new tags.
In order to do this with pure CSS/HTML, you will need to add a tag to either the image's [a href] link.. or add a tag to the [a hrer] links that you want to display with an underline.

You could write a small piece of code in javascript that would alter the border property of an element on hover quite easily. You would just need to check if the element is an IMG.

箹锭⒈辈孓 2022-06-07 7 楼

The easy way is to use

:hover (text-decoration: underline}

Also see

text-underline-position  

http://dev.w3.org/csswg/css3-text/

鹤仙姿 2022-06-07 6 楼

Its possible with css3 using a:not(img) a:hover {style:whatever;} , but there are considerations. Here is an explanation with images: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

琴流音 2022-06-07 5 楼

Try this trick. It works.

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

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

Another way - PHP:

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \1 <img\2 />\3</a>", $text); 
说好的呢 2022-06-07 4 楼

This might work

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

This would make the image cover the border, although it would be displaced downwards a pixel or so permanently.

柠檬色的秋千 2022-06-07 3 楼

Sorry, what you'd want is some kind of :parent pseudo-class that selects the child but applies to the parent, which unfortunately does not exist (not even in CSS3).

You'd have to do a bit of Javascript, selecting all elements matching #sidebar a:hover, then applying the red bottom border on the condition that they don't have a child IMG element.

羁〃客ぐ 2022-06-07 2 楼

You can't target an element depending on what child elements it has, so you would have to add something to the code to target the different links.

Can't you use underline instead of a bottom border? That would work as it's applied to the text in the link rather than the link element itself.

#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }
岁月静好 2022-06-07 1 楼

As far as JavaScript goes, I’d suggest using jQuery to add a class to all links that contain an image:

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

(The :has selector is a jQuery thing; it isn’t present in CSS.)

Then adjust your stylesheet accordingly.

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