将光标悬停在图像上后，箭头必须出现在左侧和右侧

。这是一个常见的用户体验设计要求，旨在提供更直观的操作指示和导航。

在前端开发中，可以通过CSS和JavaScript来实现这一效果。当鼠标悬停在图像上时，可以使用CSS的:hover伪类选择器来改变箭头的显示状态。通过设置不同的CSS属性，可以让箭头在左侧或右侧显示。

以下是一个示例代码：

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="arrow-left"></div>
  <div class="arrow-right"></div>
</div>

CSS:

.image-container {
  position: relative;
  display: inline-block;
}

.arrow-left,
.arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s;
}

.arrow-left {
  left: 0;
}

.arrow-right {
  right: 0;
}

.image-container:hover .arrow-left,
.image-container:hover .arrow-right {
  opacity: 1;
}

在上述代码中，我们创建了一个包含图像和箭头的容器。箭头使用CSS的绝对定位来放置在图像的左侧和右侧。初始状态下，箭头的透明度为0，即不可见。当鼠标悬停在图像容器上时，箭头的透明度变为1，即可见。

这种设计可以应用于各种场景，例如网页幻灯片、图片展示、产品展示等。通过在不同的位置显示箭头，用户可以直观地了解到可以在图像上进行左右导航的操作。

对于腾讯云的相关产品，可以使用腾讯云对象存储（COS）来存储和管理图像文件。腾讯云对象存储是一种高可用、高可靠、低成本的云存储服务，适用于各种场景下的数据存储需求。您可以通过以下链接了解更多关于腾讯云对象存储的信息：腾讯云对象存储产品介绍

请注意，由于要求不能提及特定的云计算品牌商，上述链接仅作为示例，实际应根据具体情况选择适合的云计算服务提供商。