html - 悬停一个框并突出显示另一个框

Question

.first {
  background: red;
  width: 100px;
  height: 100px;
}
.first:hover .outer-box {
  background: black;
}
.outer-box {
  width: 100px;
  height: 100px;
  background: green;
}

<div class="icons">
  <div class="first"></div>
</div>

<div class="outer-box"></div>

如何将鼠标悬停在一个框上并突出显示另一个框？

如果盒子在同一个容器中会更容易，但不幸的是它们不是。

Hope you can help perhaps updating my pen with no jquery if doable

Answer 1

您不能操作没有层级的对象。你可以使用这个方法:

<div class="icons">
   <div class="first">
       <div class="outer-box"> </div>
   </div>
</div>

/* css */
.first:hover .outer-box{
    /* Your css code */
}

或者你可以使用 javascript:

document.getElementsByClassName('first')[0].onmouseover = function(){
  document.getElementsByClassName('outer-box')[0].style = "background: black"
}

document.getElementsByClassName('first')[0].onmouseout = function(){
  document.getElementsByClassName('outer-box')[0].style = "background: green"
}

.first{
  background: red;
  width: 100px;
  height: 100px;
}

.outer-box{
  width: 100px;
  height: 100px;
  background: green;
}

<div class="icons">
  <div class="first">
  </div>
</div>

<div class="outer-box">
</div>