When hovering over one of the 5 text bits, I want to apply CSS to all bits except the one being hovered over.
Can you achieve this using jQuery and the .siblings() attribute?
Here is the 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>
And here is the 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;
}