CSS next element（none sibling）选择器

Question

我有这样的HTML结构：

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

有没有办法做“display：block;”之类的事情。到＆lt; img /＆gt;何时＆lt; path /＆gt;徘徊，仅限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>`
}