I'm new to jQuery so sorry if this sounds stupid but I'm having truble drilling down to other elemnts. Paticularly I want to fade in the .menu li a:hover class with jquery.
.menu {
padding:0;
margin:0;
list-style:none;
}
.menu li {
float:left;
margin-left:1px;
}
.menu li a {
display:block;
height:44px;
line-height:40px;
padding:0 5px;
float:right;
color:#fff;
text-decoration:none;
font-family:"Palatino Linotype", "
Book Antiqua", Palatino, serif;
font-size:12px;
font-weight:bold;
}
.menu li a b {
text-transform:uppercase;
}
.menu li a:hover {
color:#E4FFC5;
background: url(../images/arrow.png) no-repeat center bottom;
}
.current {
background: url(../images/arrow.png) no-repeat center bottom;
font-size:16px;
font-weight:bold;
}
.spacer p {
display:block;
height:44px;
line-height:40px;
padding:0 5px;
float:right;
color:#fff;
text-decoration:none;
font-family:"Palatino Linotype", "
Book Antiqua", Palatino, serif;
font-size:12px;
font-weight:bold;
}
<ul class="menu">
<li class="current"><a href="index.html">Home</a></li>
<li class="spacer">
<p>|</p>
</li>
<li><a href="#">Mission & Values </a></li>
<li class="spacer">
<p>|</p>
</li>
<li><a href="#">Caregivers</a></li>
<li class="spacer">
<p>|</p>
</li>
<li><a href="#">Special Programs </a></li>
<li class="spacer">
<p>|</p>
</li>
<li><a href="#">Enployment</a></li>
<li class="spacer">
<p>|</p>
</li>
<li><a href="#">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
$('a').mouseover(function() {
$('.logo').animate ({opacity:'0.6'}, 'normal');
});
$('a').mouseout (function() {
$('.logo').animate ({opacity:'1'}, 'normal');
$('.menu li a:hover').fadeIn ('slow');
});
</script>
