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

Question

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

该图标最初应位于 window 的右侧，（浮动：右侧并说距顶部约 10 像素。）
当鼠标悬停在其上时，图标应如图所示展开。
当鼠标悬停在图标外时，它应该缩回到它的初始位置。
即使用户滚动 up/down 页面，图标的位置也应该是 sticky/fixed。我附上了两个屏幕截图，显示了悬停前和悬停时的位置。你能告诉我如何使用 HTML、CSS3 和 JQuery（或原生 Java 脚本）来实现它吗？随意使用任何虚拟 image/text 进行演示。谢谢。

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;
}

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

Need a scrolling (left to right) effect for a Chat Assistant Icon on the UI

html

javascript

css

jquery

jquery-ui