使用CSS3如何让图片的一个区域可以点击跳转

Question

小米官网的这个效果,这里有一个DIV标签,无论如何拉动都可以保持在需要点击的这个位置,请问一下怎么实现的?

Answer 1

在CSS3中，可以使用伪类 ::before 和 ::after 来创建一个覆盖在图片上的透明层，并使用 position、width 和 height 等属性来调整该层的位置和大小。然后，使用 z-index 属性将该层置于图片之上，并为其添加 pointer-events: none 样式来确保鼠标点击能够穿透该层。

最后，可以在该层上添加链接元素（）或 JavaScript 事件处理程序来实现点击跳转。

以下是一个示例代码：

<div class="image-wrapper">
  <img src="path/to/image.jpg" alt="Image">
  <a href="https://example.com" class="overlay-link"></a>
</div>

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

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 要点击跳转的区域宽度 */
  height: 100%; /* 要点击跳转的区域高度 */
  z-index: 1;
  pointer-events: none;
}

.overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* 要点击跳转的区域宽度 */
  height: 100%; /* 要点击跳转的区域高度 */
  z-index: 2;
}

在上面的示例中，.image-wrapper 类定义了一个相对定位的父元素，.image-wrapper::before 伪类创建了一个占据图片左半部分的透明层，.overlay-link 类定义了一个占据相同区域的链接元素，可以通过 href 属性设置链接地址。

请注意，上面的示例只是其中的一种实现方法。根据具体需求，可能需要根据图片大小和链接位置等因素进行适当的调整。