1

私は基礎となるヘクスグリッドを使った小さなゲームに取り組んでいます。重複するimgには正しいマウスの相互作用に問題があるため、このためにsvgを使用することをお勧めしました。次に、いくつかのポリゴンを使用して単純な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/

私は何が間違っているのですか？

4

1 に答える 1

3

イベントのデフォルトは、オブジェクトが描画され、オブジェクトが塗りつぶされていない場所のみをターゲットにすることです。塗りつぶし/ストロークが設定されているかどうかに関係なく、ホバーが機能するように、pointer-eventsプロパティでこれを調整できます。

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

.tile:hover{
    stroke: #808080;
    fill:red;
    pointer-events: visible;
}
于 2012-11-14T22:22:15.033 に答える