How can a hover-over element still change other element styles when they're all in separate divs?

Question

I understand that an element can change the style of associated elements upon hovering as long as they're within the same divs, but how can the same functionality be achieved when they're all in separate elements such as div, section, article, h1, etc.

I have set up a jsfiddle that consists of a version that works and a version that doesn't. As best, I would like to find out a way to achieve this through CSS only, but if it is an issue that only javascript can solve, that'll be okay.

I've been looking around StackOverflow but there doesn't seem to be an answer to what to do when the elements are within separate elements.

HTML

<h1>This version works fine...</h1>
... <span class="a1">fruits</span> and <span class="b1">vegetables</span>... <span class="a2">apple</span>, <span class="b2">asparagus</span>

<h1>...but how can I get this to work?</h1>
... <div class="div1"><span class="a1">fruits</span> and <span class="b1">vegetables</span></div>... <div class="div2"><span class="a2">apple</span>, <span class="b2">asparagus</span></div>

CSS

.a1, .b1 {
    border:1px solid #333333;
    padding: 0 1% 0 1%;
    text-align: center;
    -o-transition: color 0.2s ease-out;
    -ms-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -webkit-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}
.a2, .b2 {
    border:1px solid #dddddd;
    padding: 0 1% 0 1%;
    text-align: center;
    -o-transition: color 0.2s ease-out;
    -ms-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -webkit-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
}
.a1:hover {
    border:1px solid red;
    color: white;
    background-color: red;
}
.b1:hover {
    border:1px solid green;
    color: white;
    background-color: green;
}
.a1:hover ~ .a2 {
    border:1px solid red;
    color: white;
    background-color: red;
}
.b1:hover ~ .b2 {
    border:1px solid green;
    color: white;
    background-color: green;
}

There is [no way](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) to do this using CSS yet. There's many ways to do it in JavaScript, try [looking around](https://www.google.com/). — hon2a, Nov 26 '14 at 17:31
Hi @hon2a — Thanks for clarifying. I have looked around, but not a lot answers how to assign multiple elements in an efficient way. I'm wondering if a single javascript can trigger different class names (ex: javascript only picks up on `(LETTER)1` and `(LETTER)2`, '1' being the triggering class and '2' being the triggered element. Is this possible? — kenhimself, Nov 26 '14 at 17:41
I'm not sure what you're asking now. See jQuery [.hover()](http://api.jquery.com/hover/) and [.toggleClass()](http://api.jquery.com/toggleclass/) if you want to toggle some element's class (and thus change styles) on other element's mouseover. — hon2a, Nov 26 '14 at 17:45

Sleek Geek · Answer 1 · 2014-11-26T18:47:37.300

0

I've found out what the problem is.

Go to your code, fix or take off the lines below from the problematic part

</div>
<div class="div2">

Two problems

1 Closing DIV without a starting part
1 Opening DIV without closing part

See it working here

For jQuery: you can do something like

 $(".a1").hover(function () {
                 $(".a2, .a1").css({"color":"white", "background-color":"red"});
    });

See the jQuery example here

Note: If you have the DIV's there for a reason, try the jQuery method

edited Nov 26 '14 at 18:47

answered Nov 26 '14 at 18:12

Sleek Geek

4,638
3
27
42

The whole point of this post is to write a CSS / JS that'll work around the Divs — as I mentioned in this post. That's why there are two versions... – kenhimself Nov 26 '14 at 18:24
see the jQuery example – Sleek Geek Nov 26 '14 at 18:49

Martin Ernst · Answer 2 · 2014-11-26T21:16:08.990

CSS

.a1:hover, .a2.light { /* your css */ }
.b1:hover, .b2.light { /* your css */ }

JAVASCRIPT

var fruits = document.querySelectorAll('.div2 .a2'),
    vegets = document.querySelectorAll('.div2 .b2'),
    spanf = document.querySelector('.div1 .a1'),
    spanv = document.querySelector('.div1 .b1');

spanf.addEventListener('mouseenter', function() {
    [].forEach.call(fruits, function(el) {
        el.classList.add('light');
    });
});
spanf.addEventListener('mouseleave', function() {
    [].forEach.call(fruits, function(el) {
        el.classList.remove('light');
    });
});

spanv.addEventListener('mouseenter', function() {
    [].forEach.call(vegets, function(el) {
        el.classList.add('light');
    });
});
spanv.addEventListener('mouseleave', function() {
    [].forEach.call(vegets, function(el) {
        el.classList.remove('light');
    });
});

DEMO

NOTE Safari doesn't support mouseenter / mouseleave. You can use mouseover / mouseout instead.

If you prefer a solution with jQUERY (it's less to write, but does the same under the hood):

var fruits = $('.div2 .a2'),
    vegets = $('.div2 .b2');

$('.div1 .a1').hover(function() {fruits.toggleClass('light');});

$('.div1 .b1').hover(function() {vegets.toggleClass('light');});

How can a hover-over element still change other element styles when they're all in separate divs?

2 Answers2