如何在同一时间悬停多个"div"？

Question

我有

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

和

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

而CSS则是

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

当我在d1上盘旋时,我希望d2悬停相同.如何同时悬停多个DIV？

Answer 1

你需要一些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' );
        });
    }
});

并且您需要创建一个名为css的类,该类hover在此方案中应用相同的属性.

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