Apply effect to Element on Hover of Another without JS - html

Question

I have this code: http://codepen.io/hwg/pen/azZoyp
What I am attempting to do is to apply the blur effect (SVG filter for compatibility) to the other elements on hover of another.
The most important bit of the CSS is as follows
.oi:hover ~ a {color:green;filter: url('#blur');}
This uses the ~ selector in order to effect the siblings of the Link with class of oi. This is fine, but it only affects the elements after the hovered one. Not all of the siblings in the container div.
Is this possible just in CSS?
I've seen that you can use JS as seen here: Using jQuery to Hover over one element and apply the effect in another, and in other questions.
I'd just like to not use JS if possible, would appeciate any help!
Thanks!
Code Embedded:
.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>

Answer 1

The CSS general sibling selector will only select siblings after that element. (Source: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)
Use the parent element class, or the btn class instead, and then remove the filter effect with filter:none on the selected element. To wit:
.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>

Answer 2

Is this possible just in CSS?
Unfortunately, not in a resilient way.
CSS can only descend (cascade) down the DOM, as such selectors can only identify children of an element or siblings appearing after it, at the same level.
In order to achieve what you want you will likely need to resort to a javascript solution- what you wish to achieve would be trivial in jQuery, e.g:
$('.oi').on('mouseover', function(){
$(this).siblings('a')....
});
Alternatively, as close as you will get in CSS is:
.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>