title: table td or (div) opacity change the rest of td or (div) when hover
body: <p>When I hover a <code>td</code> element, how do I change the opacity for all <code>td</code> elements except the one being hovered?</p>
  
  <p><a href="http://jsfiddle.net/jhunlio/n9MmT/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><img src="https://i.stack.imgur.com/FoK9X.jpg" alt="enter image description here"> </p>
  
  <p>html:</p>
  
  <pre><code>&lt;table border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;  
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>