溢出：隐藏的可以隐藏的偏斜dom事件？

发布于 2025-01-28 09:37:27 字数 964 浏览 3 评论 0原文

我通过CSS的草图创建了一颗钻石，该钻石位于一个圆圈的左上角。

我设置溢出：圆圈的隐藏。钻石如何仍然触发光标：指针？

这是 project 的编码。

HTML

<div class='container'>
    <div class='skew'></div>
</div>

CSS

.container {
    position: relative;
    z-index: 1;
    margin-top: 150px;
    margin-left: 300px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid red;
    overflow: hidden
}

.skew {
    transform-origin: right bottom;
    transform: skewX(45deg);
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    cursor: pointer;
}

原文

I created a diamond through the sketch of CSS, which is located in the upper left corner of a circle.

I set overflow: hidden for the circle. How can the diamond still trigger cursor: pointer?

Here is the codepen of the project.

html

<div class='container'>
    <div class='skew'></div>
</div>

css

.container {
    position: relative;
    z-index: 1;
    margin-top: 150px;
    margin-left: 300px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid red;
    overflow: hidden
}

.skew {
    transform-origin: right bottom;
    transform: skewX(45deg);
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    cursor: pointer;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月亮是我掰弯的 2025-02-04 09:37:27

夹子可以解决此问题。似乎仅在铬上发生：

.container {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid red;
  overflow: hidden;
  clip-path: circle(50%); /* added */
}

.skew {
  transform-origin: right bottom;
  transform: skewX(45deg);
  width: 150px;
  height: 150px;
  border: 1px solid blue;
  cursor: pointer;
}

<div class='container'>
  <div class='skew'></div>
</div>

clip-path can fix this. It seems to happen on Chrome only:

.container {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid red;
  overflow: hidden;
  clip-path: circle(50%); /* added */
}

.skew {
  transform-origin: right bottom;
  transform: skewX(45deg);
  width: 150px;
  height: 150px;
  border: 1px solid blue;
  cursor: pointer;
}

<div class='container'>
  <div class='skew'></div>
</div>

回复收藏 0 原文

薄荷梦 2025-02-04 09:37:27

您得到的行为是因为光标是CSS函数，当鼠标输入.skew的给定区域参数时，浏览器会激活浏览器。

溢出：隐藏不影响此功能。

正在发生的事情是，DOM将所有东西都呈现在广场上，而边界则并不真正在乎这一点。

因此，正在发生的事情是您正在切割这片馅饼，但是您绘制的圆边缘与div的边缘之间仍然存在距离。

您可以做的是使用：

剪辑：circle（％50）如Temani所述，
使用区域标签以不同的方式绘制您的Intial Circle： https://www.w3schools.com/tags/tag_area.asp
=“ https://www.codegrepper.com/code-examples/whate/inline+css+cssvg+circle” rel =“ nofollow noreferrer”> https://www.codegrepperper.com/code-com/code-code-code-code-examples/code-examples/whateasther/inline +CSS+SVG+Circle