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

【问题标题】：When hovering over a div, how to add a class to another div?将鼠标悬停在 div 上时，如何将类添加到另一个 div？
【发布时间】：2014-03-31 06:03:24
【问题描述】：

所以我有一个包含 2 个 div 的表格。每个 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/

我哪里漏掉了什么？

【问题讨论】：

标签： javascript css hover

【解决方案1】：

查看更新后的jsfiddle。

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

【讨论】：

【解决方案2】：

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

你也没有包含 jQuery。我更新了fiddle，你可以看看：http://jsfiddle.net/52v9y/2/

【讨论】：

很好，谢谢，这确实是使用 2 个不同表而不是一个表的更好方法！

【解决方案3】：

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

【讨论】：