html - 使用 "SVG polygon"悬停状态在 "SVG"之后淡入 div

Question

是否有针对此问题的纯 css 解决方案？我希望能够在 SVG 之后立即淡入 div，但仅当用户将鼠标悬停在 SVG 多边形上时。

代码看起来像这样:

<svg version="1.1" id="path" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 232.077 138.555" enable-background="new 0 0 232.077 138.555"
xml:space="preserve">
   <polygon fill="#FFFFFF" fill-opacity="0" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" points="3.059,134.255
3.778,17.055 24.495,24.928 178.323,3.52 229.238,16.201 229.238,89.779 "></polygon>
</svg>

<div class="hover"></div>

如果我想让它与 SVG(不是 svg 多边形)一起工作，我会这样写 css:

svg + .hover{
  opacity:0;
  -webkit-transition: opacity .3s ease;
  -moz-transition: opacity .3s ease;
  -ms-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

svg:hover + .hover{
  opacity:1;
}

Answer 1

不，这是不可能的，因为没有选择器。需要将鼠标悬停在 parent sibling 上然后像您在示例中那样使用加号选择下一个元素。

这里是JS不错的选择。

更新:

$('svg polygon').hover( function(){
    $('.hover').css( 'opacity', 1 );
}, function(){
    $('.hover').css( 'opacity', 0 );
} );

这是我解决它的 5 美分。