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

您需要创建名为hover的 css类，它在此方案中应用相同的属性。

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

Answer 2

你能将它们包装在div中吗？

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

<div class="container">
  <div id="d1" class="hov">NUMBER 1</div>
    <br>
  <div id="d2" class="hov">NUMBER 2</div>
</div>

Answer 3

快速脏的方法是使用脚本和一些额外的CSS。我还没有测试过，但应该可以使用

的CSS：

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

脚本：

$('#d1').hover( function() {
  $('.hov').addClass('active');
}, function() {
  $('.hov').removeClass('active');
});

Answer 4

在Kierans解决方案的基础上，如果您愿意，也可以使用不同的类进行此操作。

例如：

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

然后使用CSS：

.container:hover .a,
.container:hover .b,
.container:hover .c {  
background-color:#cde0c4;
cursor:pointer; }

通过这样做，你可以避免使用javascript来完成一项简单的任务。示例：[http://jsbin.com/nohawufoqa/1/edit?html,css,output]

如何在同一时间盘旋多个“div”？

4 个答案: