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

Question

The hover style of color transition and underline is not getting applied to the image. It is just applied to the text. I understand the color transition requires change in image color but at least underline should happen.

My CSS code is:

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

just suggestion, why not just put a border bottom when hover the element almost same effect with underline.

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

See a sample fiddle here: http://jsfiddle.net/v8rv26dx/3/

Answer 2

One solution is to apply the image in CSS as a background for the anchor <a> element, or as the background of a nested <span> .

Alternatively consider applying a bottom border, instead of underlining the text. See the answer just posted by Alex Newbie.

Answer 3

try this

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

underline added to image also