Question

我陷入了困境！我想将cursor: pointer添加到我的CSS中，但问题是它是一个三角形。如果我使用以下内容：

＆＃13;

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

#triangle {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid blue;
  cursor: pointer;
}

＆＃13;

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

＆＃13;

整个三角形及其周围的一切都有＆＃34;光标＆＃34;影响，我怎样才能使三角形有悬停影响？

Answer 1

如果我们使用变换和overflow:hidden

构造三角形，则可以使用纯CSS完成

FIDDLE

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#triangle {
  position: relative;
  height: 50px;
  overflow: hidden;
}
#triangle:before {
  content: '';
  position: absolute;
  width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
  height: 71px;
  background: blue;
  transform: rotate(45deg)translateX(29%);
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

NB：代码：translateX(29%)用于在旋转后将旋转的蓝色方块放回容器的中心。即使我们更改容器的尺寸（FIDDLE）

，此值似乎也是常量

Answer 2

使用SVG或CSS3绘制箭头。给该元素cursor: pointer赋予div包装器非游标

实施此相关文章：http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/

Answer 3

您可以使用伪元素屏蔽非三角形区域，并在其上设置cursor: default。您需要将overflow: hidden添加到包装元素以包含蒙版，当然它依赖于背景为平面颜色，并且您要掩盖的形状是完美的三角形。不是大规模的可扩展性和有点hacky，但它获得了你追求的特定结果。

#triangleholder {
  // ..
  overflow: hidden;
}

#triangle {
  // ..
  position: relative;
}
#triangle:before, #triangle:after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100px;
  height: 50px;
  top: -10px;
  cursor: default;
}
#triangle:before {
  transform: rotate(-45deg);
  right: 0;
}
#triangle:after {
  transform: rotate(45deg);
  left: 0;
}

使用CSS只使三角形具有悬停效果

3 个答案:

FIDDLE