Apply effect to Element on Hover of Another without JS

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>

Can you post your code in the question itself? Not all of us can access codepen :( — SW4, Dec 17 '14 at 08:01
@nothingisnecessary Nothing. Just a random class name I thought of. — harley_woop, Dec 17 '14 at 08:09
Asked and answered multiple times here on SO. No, at the CSS level a hover cannot affect anything other than descendants or siblings. See http://stackoverflow.com/questions/26289664/css-hover-one-element-affect-another, or http://stackoverflow.com/questions/27294155/hover-on-other-element-css, — , Dec 17 '14 at 08:30
@torazaburo I understand that, just that SO is such a huge resource, I thought that I'd find out for sure :) — harley_woop, Dec 17 '14 at 08:38

nothingisnecessary · Accepted Answer · 2014-12-17T08:35:59.910

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>

That blurs them all on hover, which kinda makes it unusable :) — harley_woop, Dec 17 '14 at 08:10

SW4 · Answer 2 · 2014-12-17T08:29:01.133

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>

Apply effect to Element on Hover of Another without JS

2 Answers2