所以我有一个包含 2 个 div 的表格。每个 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/
我哪里遗漏了什么?
最佳答案
查看此更新 jsfiddle .
在 addClass
和 removeClass
函数中指定类时不需要 .
,因为它们接受的唯一参数是类属性。您的 html 也无效,因为只有 tr
元素可以是 tbody
的直接子元素。
关于javascript - 悬停在一个div上时,如何将一个类添加到另一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22750340/