4

.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>

How can I hover over one box and highlight the other?

It would be easier if the boxes where in the same container but unfortunately they are not.

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

Jamie Barker
  • 8,145
  • 3
  • 29
  • 64
Sidney Sousa
  • 3,378
  • 11
  • 48
  • 99
  • 2
    Related: http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – turnip Jan 24 '17 at 13:03
  • 1
    Possible duplicate of [How to affect other elements when a div is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) – Abhitalks Jan 24 '17 at 13:07

4 Answers4

2

You can not manipulate an object that has no 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>
Mateus Koppe
  • 353
  • 2
  • 8
2

You can easily do this with the + combinator. Thing is, it needs to be a relative object, meaning - it must be at the same level in the html hierarchy.

You can read more about this selector here.

Here is an update Pen.

Salman A
  • 262,204
  • 82
  • 430
  • 521
Tanasos
  • 3,928
  • 4
  • 33
  • 63
0

Here is a simple method that uses a minimal amount of 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>
xfactor11
  • 11
  • 6
0

Add a class="show someid" to an item and when you hover it it will hilight someid, or just add a class="show" and it will hilight the element found in the innerText of the hoverable.

var show=document.getElementsByClassName('show')
for(var i=0;i<show.length;i=i+1){
 show[i].onmouseover = function(){
  var theclass=this.getAttribute('class');
  theclass=theclass.replace("show","");
  theclass=theclass.replace(" ","");
  if(theclass==''){
   var text=this.innerText;
  } else {
   var text=theclass;
  }
  document.getElementById(text).style = "background: #dddddd;"
 }
 show[i].onmouseout = function(){
  var theclass=this.getAttribute('class');
  theclass=theclass.replace("show","");
  theclass=theclass.replace(" ","");
  if(theclass==''){
   var text=this.innerText;
  } else {
   var text=theclass;
  }
  document.getElementById(text).style = "background: none;"
 }
}
<p id="item1">This is item 1.</p>
<p id="item2">This is item 2.</p>
<hr>
<span class="show">item1</span>
<br>
<span class="show item2">Hover me to show item 2</span>
Terry Riegel
  • 159
  • 10