Question

颜色过渡和下划线的悬停样式未应用于图像。它只适用于文本。我知道颜色过渡需要改变图像颜色，但至少应该进行下划线。

我的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/

Answer 1

刚建议，为什么不在悬停元素时将边框置于底部，与下划线几乎相同。

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/

Answer 2

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

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

Answer 3

试试这个

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

下划线也添加到图像中

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

3 个答案: