UI 上的聊天助手图标需要滚动（从左到右）效果

Question

我正在为聊天助手图标寻找一种滚动效果，它应该如下工作：

1. 图标最初应位于窗口的右侧（浮动：右，距离顶部大约 10 像素。）
2. 当鼠标悬停在其上时，图标应展开，如图所示。
3. 当鼠标悬停在图标之外时，它应该缩回到它的初始位置。
4. 即使用户向上/向下滚动页面，图标的位置也应该是固定的/固定的。 我附上两个屏幕截图，显示悬停前和悬停时的位置。您能告诉我如何使用 HTML、CSS3 和 JQuery（或本机 Java 脚本）来实现它。随意使用任何虚拟图像/文本进行演示。谢谢。

Answer 1

添加这些代码并请更改图像路径..

HTML

<a href="#" class="back-top">
    <img src="icon.png" alt="">
    <h5>Virtual Assistant</h5>
</a>

CSS

.back-top {
    border: 1px solid #429dd8;
    position: fixed;
    right: 0;
    top: 10px;
    z-index: 9;
    border-right: none;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-decoration: none;
    color: #000;
}
.back-top img {
    display: inline-block;
    vertical-align: middle;
}
.back-top h5 {
    display: inline-block;
    vertical-align: middle;
    font-size: 0px;
    transition: 0.5s all ease 0s;
}
.back-top:hover h5 {
    font-size: 16px;
    transition: 0.5s all ease 0s;
}