-1

我有 5 位文本，我希望当您将鼠标悬停在其中一个文本上时，CSS 波纹管将应用于除您悬停的文本之外的所有文本位。

您可以使用 jquery 和 .siblings() 属性来执行此操作吗？

html:

<table width="1138" height="38" border="0" class="Home111">
<tr>
<th width="146"   scope="col"> <div class="top" id="one"><a href="T-Shirts.html"class="blur out">T-SHIRTS</a></div>
</th>
<th width="146"  scope="col"> <div class="top" id="two"><a href="Bits &amp; Bobs.html"class="blur out">BLOG</a></div>
</th>
<th width="146"  scope="col"> <div class="top" id="three"><a href="Music.html"class="blur out">MUSIC</a></div>
</th>
<th width="146"  scope="col"> <div class="top" id="four"><a href="Contact.html"class="blur out">CONTACT</a></div>
</th>
<th width="146" height="38"  scope="col"> <div class="top" id="five"><a href="About.html"class="blur out"> ABOUT</a></div>
</th>

CSS：

a.blur
{
text-decoration: none;
color: #339;
}

a.blur:hover, a.blur:focus
{
text-decoration: underline;
color: #933;
}

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus
{
text-shadow: 0 0 4px #339;
}

.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus
{
text-shadow: 0 0 0 #339;
}
4

2 回答 2

1

要做到这一点，你不能简单地使用.siblings()，因为它们不是严格的兄弟姐妹，更像是非常远的表亲:)所以为了加快速度，你应该将所有项目的列表保留在一个变量中，然后用于.not(this)排除当前项目hover()回调。

var items = $('.Home111 a'); // all anchors inside table with class Home111

items.hover(function() {
    var others = items.not(this);
    // others = the siblings of current item
}, function() {
    var others = items.not(this);
    // others = the siblings of current item
});
于 2012-12-27T01:55:51.873 回答
0

没有 HTML 就无法具体，也不知道应该将哪些规则应用于兄弟姐妹

$('a.blur').hover(function(){
    $(this).siblings().addClass('someclass');
}, function(){
    $(this).siblings().removeClass('someclass');
});
于 2012-12-27T01:44:58.090 回答