title: CSS/JS: Hover over element highlights another element
body: <p>I'm creating a grid that can have <code>n rows</code> and is separated into two views: a leftChild and a rightChild.  The leftChild has the same amount of rows as the rightChild but the leftChild stays in its place.  The only difference with the rightChild is that it can be scrolled horizontally.  When I hover over a leftChild or rightChild element, I want to add some sort of hovering effect... that's easy, but what I want to do is add a hovering effect across the entire row.  So if I hover over the 3rd row in the leftChild, I want to highlight the 3rd row in the rightChild.</p>
  
  <p>Now, ideally, I'd love a complete CSS solution, similar to <a href="http://css-tricks.com/forums/discussion/16812/how-to-make-hovering-over-one-div-to-trigger-changes-in-another-div/p1" rel="nofollow">this</a>, but that's not possible because my rows don't follow directly after each other.  I was trying to think of another way of solving this, but it doesn't seem possible with straight CSS.</p>
  
  <p>Enter JavaScript.  I'm thinking the next step is to combine JavaScript with CSS.  I can add a hover effect to a row, and then use JavaScript to add a hover class to the corresponding row in the other child.  This is quite simple with jQuery, but I'm looking for a native JavaScript approach.</p>
  
  <p>The main approach I'm thinking of is adding a <code>mouseenter</code> and <code>mouseleave</code> on each row class element.  I don't really like this approach because then I'm setting up 2 event listeners on each row element... which seems a bit inefficient.  Anyway, when you enter, you grab the row number of what you hovered, then add the hover class to all of these row number elements.  When you leave, you just find all elements with hover, and remove accordingly.  The corresponding code is as follows:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body onload="loaded()"&gt;
      &lt;div id="parent"&gt;
          &lt;div id="leftChild"&gt;
              &lt;div&gt;left child&lt;/div&gt;
              &lt;div class="row row1"&gt;some content&lt;/div&gt;
              &lt;div class="row row2"&gt;other content&lt;/div&gt;
              &lt;div class="row row3"&gt;more content&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="rightChild"&gt;
              &lt;div&gt;right child&lt;/div&gt;
              &lt;div class="row row1"&gt;
                  &lt;span class="col1"&gt;column 1 content&lt;/span&gt;
                  &lt;span class="col2"&gt;column 2 content&lt;/span&gt;
                  &lt;span class="col3"&gt;column 3 content&lt;/span&gt;
                  &lt;span class="col4"&gt;column 4 content&lt;/span&gt;
                  &lt;span class="col5"&gt;column 5 content some really long content to trigger scrolling just for the purpose of this example&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row row2"&gt;
                  &lt;span class="col1"&gt;column 1 content&lt;/span&gt;
                  &lt;span class="col2"&gt;column 2 content&lt;/span&gt;
                  &lt;span class="col3"&gt;column 3 content&lt;/span&gt;
                  &lt;span class="col4"&gt;column 4 content&lt;/span&gt;
                  &lt;span class="col5"&gt;column 5 content some really long content to trigger scrolling just for the purpose of this example&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="row row3"&gt;
                  &lt;span class="col1"&gt;column 1 content&lt;/span&gt;
                  &lt;span class="col2"&gt;column 2 content&lt;/span&gt;
                  &lt;span class="col3"&gt;column 3 content&lt;/span&gt;
                  &lt;span class="col4"&gt;column 4 content&lt;/span&gt;
                  &lt;span class="col5"&gt;column 5 content some really long content to trigger scrolling just for the purpose of this example&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function loaded() {
      /*var parent = document.getElementById('parent');
      parent.onmouseenter = function(event) {
          console.log(event.target);
      };
      parent.onmouseleave = function(event) {
          console.log(event.target);
      };*/
  
      var rows = document.getElementsByClassName('row');
      for (var i = 0; i &lt; rows.length; i++) {
          rows[i].onmouseenter = function(event) {
              var splits = event.target.className.split(" ");
              var elems = document.getElementsByClassName(splits[splits.length - 1]);
              for (var j = 0; j &lt; elems.length; j++) {
                  elems[j].className += " hover";
              }
          };
  
          rows[i].onmouseleave = function(event) {
              var hovers = document.getElementsByClassName('hover');
              var len = hovers.length;
              for (var j = 0; j &lt; len; j++) {
                  hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
              }
          };
      }
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.row:hover, .hover {
      background-color: lightblue;
  }
  
  .row {
      height: 50px;
      padding: 5px;
      white-space: nowrap;
  }
  
  .row &gt; span {
      display: inline-block;
      border: 5px solid black;
  }
  
  #leftChild, #rightChild {
      float: left;
  }
  
  #rightChild {
      width: 300px;
      overflow: auto;
  }
  
  #rightChild .row {
      display: inline-block;
  }
  </code></pre>
  
  <p><strong>jsFiddle</strong>: <a href="http://jsfiddle.net/incutonez/B2qFW/3/" rel="nofollow">Here</a></p>
  
  <p>So I'd like to know a few things.</p>
  
  <ol>
  <li>Is this possible with just straight CSS?</li>
  <li>If not, how can I make my approach more efficient?</li>
  <li>Is it more efficient to have one event handler or multiple event handlers?</li>
  </ol>
  
  <p>I know I'm asking a lot here, but I hate asking multiple questions, especially if I'd have to repeat myself.  I'd appreciate any help.  Thanks!</p>