When hovering over a div, how to add a class to another div?

Question

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.

// HTML

             <table>
                <tbody>
                    <div id="1">
                        <tr>
                            <td rowspan="3"><img src="url"/></td>
                            <td><h2>Lorem ipsum</h2></td>
                        </tr>
                        <tr>
                            <td><p><span class="important">Clients:</span> Lorem / Ipsum</p></td>
                        </tr>
                        <tr>
                            <td><p><span class="important">Scope:</span> Lorem ipsum dolor sit amet</p></td>
                        </tr>
                    </div>    
                        <tr class="separator">
                            <td colspan="2"></td>
                        </tr>
                    <div id="2">    
                        <tr>
                            <td rowspan="2"><img src="url"/></td>
                            <td><h2>Lorem</h2></td>
                        </tr>
                        <tr>
                            <td><p><span class="important">Scope:</span> Lorem ipsum dolor sit amet</p></td>
                        </tr>
                    </div>
                </tbody> 
            </table>

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.

// CSS

.blur {
color: transparent;
text-shadow: 0 0 8px rgba(0,0,0,0.5);
 -webkit-filter: blur(10px);}

// JS

$(document).ready(function() {
$('#1').hover(function() {
    $('#2').addClass('.blur');
}, function() {
    $('#2').removeClass('.blur');
});

$('#2').hover(function() {
    $('#1').addClass('.blur');
}, function() {
    $('#1').removeClass('.blur');
});});

Here is the jsfiddle : http://jsfiddle.net/52v9y/

Where am I missing something ?

Answer 1

See this updated jsfiddle .

You do not need a . when specifying classes in addClass and removeClass functions since the only argument they accept are class attributes. Your html was also invalid since only tr elements can be a direct child of a tbody .

Answer 2

This is not a valid HTML code. You can't put your div s in the middle of the table code. That's why it doesn't work.

Also you didn't have jQuery included. I've updated the fiddle, you can take a look: http://jsfiddle.net/52v9y/2/

Answer 3

Discard the div elements to have valid html. The class names in your selectors come without he Leasing dot, as other contributors have advised. Assign the classes to the tr elements instead. Depending on your actual use Case, consider adjusting the class selectors in your Event Handlers (eg. $("#1 td.whatever") )