html中，鼠标放在左或右箭头图片上时，左右箭头图片同时悬停显示，鼠标离开左或右箭头图片时，左右箭头图片同时渐渐隐藏，该怎么设置这个样式

你可以使用CSS中的:hover伪类来实现鼠标悬停时的效果，同时使用CSS中的transition属性来实现渐渐隐藏的效果。以下是一个示例代码：

HTML部分：

<div class="arrow">
  <img src="left-arrow.png" alt="left arrow">
  <img src="right-arrow.png" alt="right arrow">
</div>

CSS部分：

.arrow {
  position: relative;
}

.arrow img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s;
}

.arrow img:first-child {
  left: 0;
}

.arrow img:last-child {
  right: 0;
}

.arrow img:hover {
  opacity: 1;
}

解释如下：

1. 首先给包含左右箭头图片的`div`设置`position: relative`，这样可以让其内部的绝对定位元素相对于它进行定位。

2. 给左右箭头图片都设置`position: absolute`，并且通过`top: 50%; transform: translateY(-50%)`让它们在父元素中垂直居中。

3. 使用CSS中的`:first-child`和`:last-child`伪类分别选中第一个和最后一个`img`元素，然后分别设置`left: 0`和`right: 0`，让它们分别靠左和靠右。

4. 给所有的`img`元素设置`transition: opacity 0.3s`，表示透明度变化的过渡效果。

5. 使用`:hover`伪类选中所有的`img`元素，然后设置`opacity: 1`，让它们在鼠标悬停时显示出来。

这样就能实现你想要的效果了。