悬停状态不适用于异物
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了悬停状态不适用于异物相关的知识，希望对你有一定的参考价值。
我在foreignObject标签中有一个div，我希望在将其悬停在六边形的填充颜色上时更改颜色。 Hover适用于六边形但是当你将鼠标悬停在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/
答案
你的代码看起来不错，除了两件事：
foreignObject没有提供height。所以，这就是div没有在代码中呈现的原因。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>以上是关于悬停状态不适用于异物的主要内容，如果未能解决你的问题，请参考以下文章
Riverpod StateNotifier 不适用于悬停逻辑