当悬停在元素上时，悬停在元素上如何仍会更改其他元素样式？

Question

我知道只要元素位于相同的div 中，元素就可以在悬停时更改关联元素的样式，但是当它们都在单独的元素中时，例如div、section、article、h1等，如何实现相同的功能。

我已经设置了一个 jsfiddle，它包含一个有效的版本和一个无效的版本。作为最好的，我想找到一种仅通过CSS来实现的方法，但如果这是一个只有javascript才能解决的问题，那就没关系了。

我一直在环顾 StackOverflow，但当元素位于单独的元素中时，似乎没有答案该怎么做。

.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;
}

Answer 1

我已经找到了问题所在。

转到您的代码，修复或从有问题的部分中删除以下行

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

两个问题

1. 1 无需启动部件即可关闭 DIV
2. 1 个不带闭合部分的开口 DIV

在这里看到它的工作

对于jQuery：你可以做类似的事情

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

在此处查看 jQuery 示例

注意：如果您出于某种原因拥有 DIV，请尝试 jQuery 方法

Answer 2

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

演示

注意 Safari 不支持 mouseenter / mouseleave 。您可以改用mouseover / mouseout。

如果你更喜欢jQUERY的解决方案（它写得更少，但在引擎盖下做同样的事情）：

var fruits = $('.div2 .a2'),
    vegets = $('.div2 .b2');
$('.div1 .a1').hover(function() {fruits.toggleClass('light');});
$('.div1 .b1').hover(function() {vegets.toggleClass('light');});