我有这个代码:http://codepen.io/hwg/pen/azzoyp
我试图做的是应用模糊效果（SVG过滤器兼容性）到其他元素悬停另一个。
CSS最重要的部分如下
.oi:hover ~ a {color:green;filter: url('#blur');}
这将使用选择器来影响具有
这仅仅在CSS中是可能的吗？
我已经看到您可以像这里所看到的那样使用JS:使用jQuery将效果悬停在一个元素上，然后应用到另一个元素和其他问题中。
如果可能的话，我只是不想使用JS，希望得到任何帮助！
谢啦！
嵌入代码:
null
.btn {
background:lightblue;
padding:1em;
font-family:sans-serif;
margin:0.4em;
display:inline-block;
transition:0.25s all ease-in-out;
border-radius: 5px;
}
.oi ~ a {color:red;}
.oi:hover ~ a {color:green;filter: url('#blur');}
.oi:hover {transform: scale(1.5,1.5);color:red;}
div {margin: 100px auto;display:block;width:100%;}<div>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn oi">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>null
CSS常规同级选择器将只选择该元素之后的同级。（来源:https://developer.mozilla.org/en-us/docs/web/css/general_sibling_selectors)
使用父元素类或
null
.btn {
background:lightblue;
padding:1em;
font-family:sans-serif;
margin:0.4em;
display:inline-block;
transition:0.25s all ease-in-out;
border-radius: 5px;
color: red;
}
.oi {color:black;}
.btn_wrapper {margin: 100px auto;padding:0;display:block;width:100%;}
.btn_wrapper:hover .btn {color:green;filter: url('#blur');}
.btn_wrapper:hover .btn:hover {transform: scale(1.5,1.5);color:red;filter: none;}<div class="btn_wrapper">
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn oi">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>
这仅仅在CSS中是可能的吗？
不幸的是，不是以一种有弹性的方式。
CSS只能向下（级联）DOM，因为这样的选择器只能标识元素的子元素或出现在元素后面的同级元素。
为了实现您想要的目标，您可能需要求助于javascript解决方案--您希望实现的目标在jQuery中是微不足道的，例如:
$('.oi').on('mouseover', function(){
$(this).siblings('a')....
});
或者，在CSS中最接近的是:
null
.btn {
background: lightblue;
padding: 1em;
font-family: sans-serif;
margin: 0.4em;
display: inline-block;
transition: 0.25s all ease-in-out;
border-radius: 5px;
}
a {
color: red;
}
div:hover a {
color: green;
filter: url('#blur');
}
.oi:hover {
transform: scale(1.5, 1.5);
color: red;
}
div {
margin: 100px auto;
display: block;
width: 100%;
}<div>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn oi">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
<a class="btn">Cholla</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>