我有 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 & 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;
}