CSS next element(none sibling)选择器

Question

我有这样的HTML结构:

<svg>
   <path/>
</svg>
<img/>

有没有办法做"display:block;"之类的事情.到<img />时<path />悬停,仅限CSS？

Answer 1

只有当可以选择父级时，这才是可能的，<path/>不幸的是，这是不可能的，所以你的答案是这是不可能的。

如果您想使用 javascript 尝试此操作，我可以为您提供一个 jQuery（不是最好的）示例。

$('svg > path').hover(function(){
   $(this).parent().next().addClass('hover');
}, function() {
   $(this).parent().next().removeClass('hover');
});

然后在你的CSS中你可以这样做。

img.hover{
   // These styles take effect when you hover `<path>`
}