如何通过点击重置VueJS+CSS实现的多边形图片悬停效果

我用VueJS和CSS实现了多边形图片效果，鼠标悬停任意图片时，该图片会铺满整个容器宽高。现在需要实现：悬停图片使其铺满后，点击该图片将其恢复至初始多边形状态。尝试过:active伪类、checkbox技巧，但都没生效。

纯CSS无法持久化点击状态（:active仅在点击瞬间生效），因此结合Vue的响应式状态管理来实现需求，具体步骤如下：

1. 状态管理与模板修改 #

在Vue组件中添加响应式数组记录每个图片的重置状态，绑定点击事件切换状态，并给每个.clip元素添加动态类：

<template>
  <div class="container">
    <div 
      class="clip clip1" 
      :class="{ 'reset': activeClips[0] }"
      @click="activeClips[0] = !activeClips[0]"
    >
      <div class="content">
        <h2>Post title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
          recusandae fugit dolores accusamus est ex id dolor ab tenetur, non sit
          a et asperiores doloribus libero aut animi cupiditate reiciendis.
        </p>
      </div>
    </div>
    <div 
      class="clip clip2" 
      :class="{ 'reset': activeClips[1] }"
      @click="activeClips[1] = !activeClips[1]"
    >
      <div class="content">
        <h2>Post title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
          recusandae fugit dolores accusamus est ex id dolor ab tenetur, non sit
          a et asperiores doloribus libero aut animi cupiditate reiciendis.
        </p>
      </div>
    </div>
    <div 
      class="clip clip3" 
      :class="{ 'reset': activeClips[2] }"
      @click="activeClips[2] = !activeClips[2]"
    >
      <div class="content">
        <h2>Post title</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui
          recusandae fugit dolores accusamus est ex id dolor ab tenetur, non sit
          a et asperiores doloribus libero aut animi cupiditate reiciendis.
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeClips: [false, false, false]
    }
  }
}
</script>

2. 调整CSS规则 #

添加CSS变量存储每个图片的初始多边形路径，修改hover逻辑并添加重置状态的样式：

@import "./base.css";

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

#app {
  width: 100%;
  height: 100vh;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  background-color: #111;
}

.container {
  position: relative;
  width: 800px;
  height: 500px;
  background: #222;
}

.container .clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  cursor: pointer;
}

/* 初始状态与路径变量 */
.container .clip.clip1 {
  background: url("./img/img1.jpg");
  background-size: cover;
  clip-path: polygon(0 0, 55% 0, 20% 100%, 0% 100%);
  --initial-path: polygon(0 0, 55% 0, 20% 100%, 0% 100%);
}

.container .clip.clip2 {
  background: url("./img/img2.jpg");
  background-size: cover;
  clip-path: polygon(55% 0, 100% 0%, 45% 100%, 20% 100%);
  --initial-path: polygon(55% 0, 100% 0%, 45% 100%, 20% 100%);
}

.container .clip.clip3 {
  background: url("./img/img3.jpg");
  background-size: cover;
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 45% 100%);
  --initial-path: polygon(100% 0, 100% 0%, 100% 100%, 45% 100%);
}

/* 未重置时的hover效果 */
.container:hover .clip:not(.reset):not(:hover) {
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
}
.container .clip:not(.reset):hover {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

/* 重置状态：强制回到初始路径，不再响应hover铺满 */
.container .clip.reset {
  clip-path: var(--initial-path) !important;
}

.content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70%;
  padding: 20px;
  background: #fff;
  opacity: 0;
  transition: 0.5s;
}

.container .clip:hover .content {
  bottom: 0;
  opacity: 1;
}

效果说明 #

• 鼠标悬停未被重置的图片时，该图片铺满容器，其他图片收缩
• 点击铺满的图片，它会立即回到初始多边形状态，且后续hover不再触发铺满效果
• 再次点击已重置的图片，可恢复原有的hover铺满逻辑

内容的提问来源于stack exchange，提问作者Alexandro Pineda