1

在下一个示例中，我将绘制一个没有填充的椭圆和一个描边-dasharray。pointer-events设置为visibleStroke或。stroke当我将鼠标悬停在笔划上时，里面的圆圈应该改变它fill并且stroke：

ellipse:hover ~ circle {
  fill: LightSkyBlue;
  stroke: DodgerBlue;
}

来自MDN的定义：

visibleStroke：
仅限 SVG。只有当可见性属性设置为可见并且鼠标光标位于元素的周边（即笔划）上时，该元素才能成为鼠标事件的目标。stroke 属性的值不影响事件处理。

在下一个示例中，当我将鼠标悬停在破折号上时，一切都按预期进行。但是，当我将鼠标悬停在间隙上时，什么也没有发生。更重要的是：在 Chrome 中，不敏感的间隙接缝被抵消。这是错误还是功能？

figure {
  width: 200px;
  height: 230px;
  border: 1px solid #d9d9d9;
  margin:1em;
}
figure::before {
  content: attr(data-pe);
  visibility: visible;
  color: indigo;
  background: skyBlue;
  display: block;
  padding: 0.5em;
}
ellipse {
  fill: none;
  stroke: #d9d9d9;
  stroke-dasharray: 4 3;
  stroke-width: 2;
}
ellipse:hover ~ circle {
  fill: LightSkyBlue;
  stroke: DodgerBlue;
}
circle {
  fill: royalBlue;
  stroke: red;
  stroke-width: 2;
  pointer-events: none;
}
<figure data-pe="visibleStroke">
    <svg viewBox="-12 -12 24 24">
      <ellipse rx="9" ry="9" style="pointer-events:visibleStroke;"></ellipse>
      <circle r="5"></circle>
    </svg>
</figure>

4

0 回答 0