将锚标记样式应用于文本和图像

Apply anchor tag style to text as well image

本文关键字：文本 图像 应用于 样式      更新时间：2023-09-26

悬停样式的颜色过渡和下划线没有应用到图像上。它只是应用于文本。我理解颜色过渡需要改变图像颜色，但至少应该有下划线。

我的CSS代码是: 
a {
    color: #2b9af3;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
a {
    background-color: transparent;
}
a {
    color: #2b9af3;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
a {
    background-color: transparent;
}
a:hover {
    color: #33ccff;
    text-decoration: underline;
    transition: color 0.4s ease 0s;
}
HTML: 

<a class="hx-back-to-top">Back to top&nbsp;&nbsp; <img src="http://dummyimage.com/7x9/000/fff" class=""></a>

jsfiddle:http://jsfiddle.net/v8rv26dx/1/

try this

a.hx-back-to-top:hover {
    color: #33ccff;
    border-bottom: 1px solid #33ccff; 
    transition: color 0.4s ease 0s;
}

为图片添加下划线

只是个建议，为什么不直接在元素悬停时设置一个底部边框，效果几乎和下划线一样。

a:hover {
    color: #33ccff;
    border-bottom: 1px solid blue; /* adds border bottom on hover */
    transition: color 0.4s ease 0s;
}


在这里查看示例提琴:http://jsfiddle.net/v8rv26dx/3/

一种解决方案是应用CSS中的图像作为锚定<a>元素的背景，或作为嵌套<span>的背景。

或者考虑应用底部边框，而不是下划线文本。查看Alex Newbie刚刚发布的答案

相关文章：