hover elements = change tagged elements

Marked elements change when triggering div is hovered.

HTML

<h1>Hoverover <span class="demo">fruits</span> and <span class="demo">vegetables</span></h1>

<hr/>

<h1>This Example is working just fine but...</h1>

The following <span class="a1">fruits</span> and <span class="b1">vegetables</span> are in the basket:
<span class="a2">apple</span>, <span class="b2">asparagus</span>, <span class="b2">lettus</span>, <span class="a2">pears</span>, <span class="b2">peas</span>, <span class="b2">avocado</span>, <span class="a2">banana</span>, <span class="b2">cabbage</span>, <span class="b2">onion</span>, <span class="a2">grape</span>, <span class="a2">melon</span>, <span class="b2">artichoke</span>, <span class="a2">lemon</span>, <span class="b2">mushroom</span>, <span class="b2">peanut</span>, and <span class="b2">orange</span>

<hr/>

<h1>...This one isn't<br/>How can I get this to work when they're inside different divs?</h1>

<div class="div1">The following <span class="a1">fruits</span> and <span class="b1">vegetables</span> are in the basket:</div>
<div class="div2"><span class="a2">apple</span>, <span class="b2">asparagus</span>, <span class="b2">lettus</span>, <span class="a2">pears</span>, <span class="b2">peas</span>, <span class="b2">avocado</span>, <span class="a2">banana</span>, <span class="b2">cabbage</span>, <span class="b2">onion</span>, <span class="a2">grape</span>, <span class="a2">melon</span>, <span class="b2">artichoke</span>, <span class="a2">lemon</span>, <span class="b2">mushroom</span>, <span class="b2">peanut</span>, and <span class="b2">orange</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, .a2.light {
    border:1px solid red;
    color: white;
    background-color: red;
}
.b1:hover, .b2.light {
    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;
}

/* IRRELEVANT ELEMENTS */
body {
    padding: 5%;
    font-size: 1em;
    line-height: 1.5em;
    font-family: helvetica;
}
h1 {
    margin: 4% 0 1% 0;
    font-weight: bold;
    color: blue;
    font-family: times;
}
.demo {
    border:1px solid blue;
    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;
}

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');
    });
});