<div class="tu"> 用H5伪元素before与after，网页焦点图片页，当鼠标移动上的时候， 出现 上一张图片和下一张图片的按钮 < img src="img/11.jpg" > </div>

你可以尝试以下代码实现你的需求：

HTML代码：

<div class="tu">
  <img src="img/11.jpg">
</div>

CSS代码：

.tu {
  position: relative;
  width: 400px; /* 图片宽度 */
  height: 300px; /* 图片高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.tu:before,
.tu:after {
  content: "";
  position: absolute;
  top: 50%; /* 上下居中 */
  margin-top: -20px; /* 图标高度的一半 */
  width: 40px; /* 图标宽度 */
  height: 40px; /* 图标高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 图标背景颜色 */
  color: #fff; /* 图标颜色 */
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0; /* 初始透明度为0 */
  transition: all 0.3s; /* 过渡效果 */
}

.tu:before {
  left: 10px; /* 左图标位置 */
  content: "<";
}

.tu:after {
  right: 10px; /* 右图标位置 */
  content: ">";
}

.tu:hover:before,
.tu:hover:after {
  opacity: 1; /* 鼠标悬停时透明度为1 */
}

.tu:hover:before {
  left: 0; /* 左图标位置调整 */
}

.tu:hover:after {
  right: 0; /* 右图标位置调整 */
}

解释：

1. 使用 `position: relative` 让 `.tu` 相对定位，以便后续绝对定位图标的参考点。
2. 使用 `overflow: hidden` 隐藏超出部分，以确保只显示一张图片。
3. 使用 `:before` 和 `:after` 伪元素在左右两侧添加图标，并使用 `opacity` 控制初始透明度为0，使用 `transition` 添加过渡效果。
4. 使用 `:hover` 伪类控制鼠标悬停时图标的透明度和位置。

注意：

1. 图标样式可以根据需要自行调整。
2. 图片宽度和高度需要根据实际情况设置。
3. 图片需要放在 `.tu` 容器内，否则图标可能会出现定位问题。