html - 将鼠标悬停在形状区域上时，如何让我的光标变为指针？

Question

我的页面上有一个三 Angular 形，如果用户将鼠标悬停在它上面，它应该将光标更改为指针。到目前为止一切顺利。

三 Angular 形是用 CSS 制作的:

#triangleShape {
  width: 0;
  height: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
  border-bottom: 400px solid rgb(18, 75, 35);
  cursor: pointer;
}

<div id="triangleShape"></div>

因此，如果用户将鼠标悬停在该 div 上，它会更改光标，但只有当用户将鼠标悬停在实际的绿色三 Angular 形上时，它才会更改光标。我知道此 CSS 会对整个 div 使用react，但这可能是我想要实现的目标吗？

Answer 1

您可以考虑使用 SVG 来创建形状，您将拥有所需的东西:

svg polygon{
  cursor: pointer;
}

<svg height="300" width="400">
  <polygon points="200,0 0,300 400,300" fill=green />
</svg>

或者考虑clip-path:

.triangle {
  width: 400px;
  height: 300px;
  background: green;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor:pointer;
}

<div class="triangle"></div>