CSS悬停-它可以影响具有相同类名的多个div

Sir 发表于 Dev

先生

我有5个div，它们具有相同的类名，如下所示：

CSS：

.test:hover{
   color:red;
}

HTML：

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

想象一下，这些Div属于页面上不同的父div ...

我正在尝试找到一种方法，以便将color:red鼠标悬停在5个中的任何一个上而不是仅将其更改为有问题的鼠标上，它们都将变为...

我不能将它们包裹在父母中，也不能给父母一个悬停……他们最初并没有共享相同的父母。

CSS是否提供执行此操作的方法，还是我不得不依靠JavaScript？

大卫说恢复莫妮卡

鉴于CSS无法（但现在）执行此任务，一种可行的（普通/原始）JavaScript方法（在支持[].forEach()和的兼容浏览器中）是：document.querySelectorAll()

function classToggle (evt, find, toggle) {
    [].forEach.call(document.querySelectorAll('.' + find), function(a){
        a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
    });
}

var els = document.querySelectorAll('.test');

for (var i = 0, len = els.length; i<len; i++){
    els[i].addEventListener('mouseover', function(e){
        classToggle(e, 'test', 'highlight');
    });
    els[i].addEventListener('mouseout', function(e){
        classToggle(e, 'test', 'highlight');
    });
}