How to drill down with jQuery?

Question

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.

CSS

.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;
}

HTML

 <ul class="menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li class="spacer">
        <p>|</p>
    </li>
    <li><a href="#">Mission &amp; 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>

Javascript

<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>

Answer 1

Instead of this

$('.menu li a:hover').fadeIn ('slow'); 

Note : here you're saying 'find me all A elements currently hovered within a LI within a class .menu, and fade them in'

What you wanted perhaps to say is 'find me all A elements within a LI within a class .menu, and when one of them is overed, fade it in.'

I'd suggest something like

$('.menu li a').hover(function(){ $(this).fadeIn ('slow'); }, 
                      function(){ $(this).fadeOut('slow'); });

Answer 2

The selector you are looking for is

$("ul.menu > li > a")

I think you are trying to fade the anchor tag to a particular level on mouse out and rest it on mouse over. For this you can use fadeTo method

$(function() {
    $('ul.menu > li > a').hover(function() {
        $(this).fadeTo ('slow',1);
    },
    function() {
        $(this).fadeTo ('slow',0.5);
    });

Answer 3

If you change your classes around a bit you can do this:

Change hove to a class:

.menu li a.hover {
    background: url(../images/arrow.png) no-repeat center bottom;
}

Animate the font color using that background in the class, replace all your jQuery with:

$(function() {
  $('.menu li a').hover(function() {
    $('.logo').animate ({opacity:'0.6'}, 'normal');
    $(this).addClass("hover").animate({ color:'#E4FFC5'}, "slow");
  }, function() {
    $('.logo').animate ({opacity:'1'}, 'normal');
    $(this).removeClass("hover").animate({ color:'#fff' }, "slow");
  });
});

Answer 4

If you use Firefox you can install firebug. With firebug you can set breakpoints on your javascript and go line for line. Also you can inspect the DOM directly and see how the DOM is like etc.