Question

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

三角形是用CSS制作的：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

Answer 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)
}

<div></div>

Answer 2

您可以考虑使用SVG创建形状，您将拥有所需的内容：

＆＃13;

svg polygon{
  cursor: pointer;
}

＆＃13;

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

＆＃13;

或者考虑clip-path：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

请遵循以下参考，以更好地了解CSS游标属性。

参考：DataFrame.explode

话虽如此，您可以使用以下代码段完成工作。

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

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

祝你好运！

将鼠标悬停在形状区域上时，如何将光标更改为指针？

3 个答案: