你有没有想过，在你的网站上添加一个按钮，当鼠标移动到按钮上时，会弹出一张图片？今天我们就来聊

一聊如何用低代码工具 Elementor 轻松实现这个功能。别担心，我会用最通俗的语言一步步教你完成这个过程。

第一步，添加组件

首先，我们需要进入Elementor的编辑页面。找到你想要添加悬浮按钮的位置，然后从左边的工具栏拖拽一个按钮。

第二步，设置图片组件

我们要给页面添加一张图片。从左边的工具栏拖拽一个图片组件过来，放到按钮下面。这张图片需要做一些设置，高级设置
Z指数设置为999
CSS 类为：contact

把图片当成一个气球，我们要用一根线把它固定在屏幕的某个位置。为了实现这个效果，为了让图片在按钮正下方显示，我们还需要用一些简单的代码调整图片的位置。

自定义CSS 代码为

selector {
  position: fixed;
  top: 120px;
  left:550px;
  display: none;
  
}
selector:hover {
  display: block;
}

第三步，设置按钮组件

接下来的任务是让图片在鼠标移动到按钮上时显示出来。想象一下，当鼠标移动到按钮上时，我们按下一个遥控器的按钮，图片就弹出来了。为了实现这个效果，我们还需要用到一点点代码。

在按钮组件的高级设置中，自定义 CSS 中设置

selector:hover + .icon-image {
  display: block !important;
}

.icon-image与上一步骤中CSS 类要一致，

最后，别忘了点击Elementor编辑器的“更新”按钮，保存我们所做的更改。现在，当你在前端预览页面时，鼠标移动到悬浮按钮上时，图片就会显示在按钮正下方啦！

其他问题

• 如何左右移动图片

设置完成后，第二步骤中的top、left、都是可以直接调数值的，可以让图片左右移动

• 如何调节图片宽度