将鼠标悬停在形状区域上时如何让光标变为指针？答案

【问题标题】：How to have my cursor change to pointer when hovering over the area of a shape?将鼠标悬停在形状区域上时如何让光标变为指针？
【发布时间】：2018-10-16 17:15:12
【问题描述】：

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

三角形是用 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;
}

&lt;div id="triangleShape"&gt;&lt;/div&gt;

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

【问题讨论】：

标签： html css hover

【解决方案1】：

这是正常行为，因为透明边框是您的div 的一部分。然后cursor: pointer 将对整个方块做出反应。

您可以使用子元素（伪元素或锚标记）并使用overflow 和transforms。

div {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

div::before {
  cursor: pointer;
  content: ' ';
  display:block;
  height: 100%;
  background: green;
  transform: rotate(45deg) translateX(150px) translateY(150px)
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

很高兴，但不要太早感谢我，您仍然需要使用变换，并且可能需要一些时间才能获得正确的结果！

【解决方案2】：

您可以考虑使用 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;
}

&lt;div class="triangle"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

按照下面的参考来更好地了解 CSS 光标属性。

参考：https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

话虽如此，您可以使用以下 sn-p 来完成工作。

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  cursor: pointer;
}

&lt;div class="triangle-up"&gt;&lt;/div&gt;

祝你好运！

【讨论】：