使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

有没有一个只用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;
}

不，CSS 是不可能的，因为没有选择器。需要将鼠标悬停在父母兄弟姐妹 https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector然后使用加号选择下一个元素，就像您在示例中所做的那样。

这里JS是一个不错的选择。

Update:

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

这是我的5美分来解决这个问题。