css - 悬停状态不适用于异物

Question

我在 foreignObject 标签内有一个 div，我想在将鼠标悬停在它上面时将颜色更改为与六边形的填充颜色相同。悬停在六边形上效果很好，但是当您将鼠标悬停在 div 上时，什么也没有发生。有什么想法吗？

.hex {
    stroke: red;
    stroke-width: 1px;
    fill: transparent;
}

.hex:hover {
    fill: blue;
}
#div1 {
    border: 1px solid green;
    text-align: center;
}
#div1:hover {
  fill: blue;
}

    <svg id="viewBox" viewBox="0 0 3000 1000"  width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>

jsfiddle: http://jsfiddle.net/0asLzwjv/28/

Answer 1

除了两点，你的代码看起来不错:

1. foreignObject 未随 height 一起提供。因此，这就是 div 未在您的代码中呈现的原因。

2. div 采用background-colour 而不是fill。

我已经根据上述更改更新了您的代码。

.hex {
  stroke: red;
  stroke-width: 1px;
  fill: transparent;
}

.hex:hover {
  fill: yellow;
}

#div1 {
  border: 1px solid green;
  text-align: center;
}

#div1:hover {
  background-color: #999;
}

<svg id="viewBox" viewBox="0 0 3000 1000" width="3000" height="1000">
      <g>
      <use class="hex" xlink:href="#hexshape"/>
        <foreignObject id="h0" x="0" y="120" width="300" height="300">
          <div id="div1">div inside SVG.</div>
        </foreignObject>>

      </g>
      <defs>
        <polygon id="hexshape" width="300" height="260" points="300,130 225,260 75,260 0,130 75,0 225,0"></polygon>
      </defs>
    </svg>