将链接文本向左移动并在悬停时显示图像答案

【问题标题】：Move link text to the left and show image on hover将链接文本向左移动并在悬停时显示图像
【发布时间】：2019-05-16 19:41:12
【问题描述】：

考虑以下 HTML：

<div class="link-container">
    <a class="link" href="workshops.php">More workshops</a>
    <img src="arrow.png">
</div>

预期结果：

a 元素文本在hover 上向左移动一点，并在a 元素的右侧显示img 元素
只有文本在悬停时向左移动
图像淡入

我如何做到这一点？

【问题讨论】：

标签： html css

【解决方案1】：

喏，

这是完成您要求的工作的 sn-p

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div:hover 
{
    left: -10px;
    position: relative;
}

a{
    position: relative;
    padding-left: 20px;
}

a:after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX///8AAABxcXEGBgaamprS0tLPz89aWlpWVlbT09NRUVFVVVVZWVldXV1OTk7W1ta2traWlpZGRkaCgoJyyOvBAAACf0lEQVR4nO3dC3KCMBhFYf8+1L5sbfe/14ZxmIoIJLE2vdfzbaCcCY8gkK5WAAAAAAAAAAAAAAAAAAAAAAAAaOpj3XoLrm0fm8fW23BdDxHx/N56K66pKwzrcTwURrzZHo99oW/jT2HE1nJfPS5M55yn1tvz+4aFjvvqaWFqNNtXx4Vu145zhV5zgPOFEa824zhV6HPOmS50aZwr9JgDzBc6zAGWCvX31eVC9TlATqH2HCCvMGInOwfILdSdA+QXqp5zSgo1G8sKI17kro+lhXpzgPLCdM6R2ldrCi+bA9z9sc+qwkvGsfIPNrCrPB7vW294gbp7K6XCNF+t2Fe1CmvmAGqF6fpYuK/qFaZzTlGjYmHZtUOzsOSco1qYP466hbnHo3JhurfKGEftwpzjUb1wuVG/MM0BZhsdCufvOzwK033H5Di6FE4fjz6FU+PoVHj+ePQqPDcHcCscH49+haeNjoXDOYBn4fF9h2vhz7XDt7C/R3YuPFw7vAsjvswLt+Zj6H4cup9Ld2vv6+Hxsw3HQvd56elv4W6F4+fEXoXu9/juv9O4/9Y2/azNo3DuOZtD4fwzNv1C92dP7s8Pp5/HeBTmvcunW+j+Lob7+zTu70S5v9f2Yv5uovv7pe7vCOdc38dab3W+2u/1/L+3+Gt138zUHH+t1BQq9dUUll3f2+P7wyH3b0i1jr8e33L3dNfkyStUHb8O62Jor4nRWVyfRrxvqbD0/v0/uuV1ojz6bne9Nt3r+9gtrpvocvz1Tgu9xq8zLNS7v102WEfYsG+wFrTd/nlwK+t5byz3zwP/dfX31uPX8f//FgAAAAAAAAAAAAAAAAAAAAAAAP/cN+LxOzmMTdyOAAAAAElFTkSuQmCC);
    display: block;
    position: absolute;
    left: 234px;     
    top: -30px; 
    opacity: 0;
    transition: opacity 0.1s ease-out 0s;    
}

a:hover:after {
    transition: opacity 1.5s ease-out 0s;
    opacity: 1;
}

</style>
</head>
<body>

<div class="link-container">
    <a class="link" href="workshops.php">More workshops</a>
</div>  

</body>
</html>

注意：您可以根据以下语法调整transition 值以根据需要设置淡入和淡出[很好的参考here]：

transition:<property> <duration> <timing-function> <delay>;

祝你有美好的一天，
安东尼诺

【讨论】：

太棒了！我希望图像淡入，当您悬停时只有文本向左移动！
你好！我根据您的评论编辑了代码。一些事情：为了避免下次投反对票，请展示您在解决您提出的任务方面的尝试。另外，请在发布问题时将所有要求一起列出，而不是在人们已经研究解决方案之后[我编辑了您的问题]。如果再次发生这种情况，我建议您打开另一个问题，而不是稍后添加规范。当问题有多个问题且每个问题都值得更多关注时，一个新问题也是一种很好的做法[这里不是你的情况]。周末愉快！