title: When hovering over a div, how to add a class to another div?
body: <p>So I have a table including 2 divs. Each div contains an image and some text. I want that when hovering one of the div, the elements (all of them) of the other one get blurred.</p>
  
  <p>// HTML</p>
  
  <pre><code>             &lt;table&gt;
                  &lt;tbody&gt;
                      &lt;div id="1"&gt;
                          &lt;tr&gt;
                              &lt;td rowspan="3"&gt;&lt;img src="url"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;h2&gt;Lorem ipsum&lt;/h2&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;p&gt;&lt;span class="important"&gt;Clients:&lt;/span&gt; Lorem / Ipsum&lt;/p&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;p&gt;&lt;span class="important"&gt;Scope:&lt;/span&gt; Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/div&gt;    
                          &lt;tr class="separator"&gt;
                              &lt;td colspan="2"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;div id="2"&gt;    
                          &lt;tr&gt;
                              &lt;td rowspan="2"&gt;&lt;img src="url"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;h2&gt;Lorem&lt;/h2&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;p&gt;&lt;span class="important"&gt;Scope:&lt;/span&gt; Lorem ipsum dolor sit amet&lt;/p&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/div&gt;
                  &lt;/tbody&gt; 
              &lt;/table&gt;
  </code></pre>
  
  <p>I created the class .blur to affect to the wanted div through js, but somehow, it doesn't work and neither text nor image are blurred.</p>
  
  <p>// CSS</p>
  
  <pre><code>.blur {
  color: transparent;
  text-shadow: 0 0 8px rgba(0,0,0,0.5);
   -webkit-filter: blur(10px);}
  </code></pre>
  
  <p>// JS</p>
  
  <pre><code>$(document).ready(function() {
  $('#1').hover(function() {
      $('#2').addClass('.blur');
  }, function() {
      $('#2').removeClass('.blur');
  });
  
  $('#2').hover(function() {
      $('#1').addClass('.blur');
  }, function() {
      $('#1').removeClass('.blur');
  });});
  </code></pre>
  
  <p>Here is the jsfiddle : <a href="http://jsfiddle.net/52v9y/" rel="nofollow">http://jsfiddle.net/52v9y/</a></p>
  
  <p>Where am I missing something ?</p>