Move one checkbox and select another

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>

Run codeHide result

How can I hover over one field and highlight another?

It would be easier if the boxes where in the same container, but, unfortunately, this is not so.

Hope you can help, maybe upgrade my pen without jquery if feasible

Answer 1

You cannot manipulate an object that does not have a hierarchical level. You can use this method:

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

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

Or you can use 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>

Run codeHide result

Answer 2

You can easily do this with a combinator . The fact is that it must be a relative object, that is, it must be at the same level in the html hierarchy.+

.

Pen.

Answer 3

, javascript.

function color() {
  document.getElementById("outer").style.background = "black";
}
function outcolor() {
  document.getElementById("outer").style.background = "green";
}

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

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

<div class="icons">
  <div class="first" onmouseover="color()" onmouseout="outcolor()">
  </div>
</div>

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

Hide result