Question

我正在与一个潜在的hexgrid进行一场小游戏。为此我建议使用svg，因为重叠的img存在正确的鼠标交互问题。现在我用一些多边形构建一个简单的hexgrid，并为悬停效果添加了一点CSS。但这不能正常工作。它不会一直触发，并且在行为上非常不稳定。基本上它包括：

...
<svg id="svggrid" class="grid" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="25,43 75,43 100,86 75,129 25,129 0,86" class="tile"></polygon>
  <polygon points="25,129 75,129 100,172 75,215 25,215 0,172" class="tile"></polygon>
  <polygon points="25,215 75,215 100,258 75,301 25,301 0,258" class="tile"></polygon>
  <polygon points="100,0 150,0 175,43 150,86 100,86 75,43" class="tile"></polygon>
  <polygon points="100,86 150,86 175,129 150,172 100,172 75,129" class="tile"></polygon>
  <polygon points="100,172 150,172 175,215 150,258 100,258 75,215" class="tile"></polygon>
  <polygon points="175,43 225,43 250,86 225,129 175,129 150,86" class="tile"></polygon>
  <polygon points="175,129 225,129 250,172 225,215 175,215 150,172" class="tile"></polygon>
  <polygon points="175,215 225,215 250,258 225,301 175,301 150,258" class="tile"></polygon>
</svg>
...

CSS（外部文件，链接到网站）：

...
.tile{
  stroke: #000000;
  fill:none;
}

.tile:hover{
  stroke: #808080;
  fill:red;
}
...

我把它放进了这个jsfiddle：

http://jsfiddle.net/TZjDp/

如果我删除了SVG的CSS中的.tile，它可以工作，但没有我无法调整多边形的颜色和边框。我很困惑，为什么没有这一部分它会起作用。

这显示在这个jsfiddle中：http://jsfiddle.net/tf3fu/

我做错了什么？

Answer 1

事件的默认值仅针对绘制对象的位置和未填充的对象。 pointer-events属性可以对此进行调整，以便无论是否设置了填充/描边，悬停都会起作用。

.tile{
    stroke: #000000;
    fill:none;
    pointer-events: visible;
}

.tile:hover{
    stroke: #808080;
    fill:red;
    pointer-events: visible;
}

SVG hexgrid：悬停不正常

1 个答案: