我希望能够在悬停时使用border-bottom定位CSS中的文本链接,但是所有链接都是悬停时没有边框的图像.所以:
<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
我试过这个CSS:
#sidebar a:hover {
border-bottom: 1px dotted red;
}
#sidebar a:hover img {
border-bottom: none;
}
但是这不起作用......我认为锚必须是目标而不是图像.我一直在谷歌周围寻找,似乎没有人知道如何做到这一点,除非通过使用特定的类或id定位图像链接,或使用display:block.
但是,我不能使用这些解决方案,因为内容在CMS中,所以我不希望用户必须为他们插入的每个图像分配一个类.并且display:block将无法工作,因为我不知道这是否适合用户想要显示的每个图像.
最后,我希望能够在纯CSS(没有Javascript)中执行此操作.也许没有办法......但是你们的任何帮助或想法都将不胜感激!
css ×1