将鼠标悬停在div上时，如何将一个类添加到另一个div？

Question

所以我有一张桌子，包括2格。 每个div包含一个图像和一些文本。 我希望将鼠标悬停在一个div上时，另一个的元素（所有元素）变得模糊。

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

我创建了.blur类，以通过js影响所需的div，但不知何故，它无法正常工作，文本和图像均不会模糊。

// 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');
});});

这是jsfiddle： http : //jsfiddle.net/52v9y/

我在哪里想念什么？

Answer 1

请参阅此更新的jsfiddle 。

您不需要. 在addClass和removeClass函数中指定类时，因为它们接受的唯一参数是类属性。 您的html也是无效的，因为只有tr元素可以是tbody的直接子代。

Answer 2

这不是有效的HTML代码。 您不能将div放在table代码的中间。 这就是为什么它不起作用。

另外，您没有包含jQuery。 我已经更新了小提琴，您可以看一下： http : //jsfiddle.net/52v9y/2/

Answer 3

丢弃div元素以获取有效的html。 正如其他贡献者所建议的那样，选择器中的类名不带租赁点。 而是将类分配给tr元素。 根据您的实际用例，考虑在事件处理程序中调整类选择器（例如$("#1 td.whatever") ）