javascript - 如何同时悬停多个 “div”？

我有

<div id="d1" class="hov"></div>

和

<div id="d2" class="hov"></div>

CSS是

.hov:hover{
    background-color:#cde0c4;
    cursor:pointer;
}

当我将鼠标悬停在d1上时，我希望d2悬停相同。
如何同时悬停多个DIV？

最佳答案

为此，您需要一些Javascript。例如:

document.body.addEventListener( 'mouseover', function( event ) {
    if( event.target.classList.contains( 'hov' ) ) {
        [].forEach.call(document.getElementsByClassName( 'hov' ), function( elem ) {
            elem.classList.add( 'hover' );
        });
    }
});

document.body.addEventListener( 'mouseout', function( event ) {
    if( event.target.classList.contains( 'hov' ) ) {
        [].forEach.call(document.getElementsByClassName( 'hov' ), function( elem ) {
            elem.classList.remove( 'hover' );
        });
    }
});

并且您需要创建一个名为hover的css类，该类在这种情况下应用相同的属性。

演示:http://jsfiddle.net/1LkfbcLx/