Jquery hover with list items

Question

In my html code there are list items. I want to show and hide related fav div when hover the related list item. But i can not relate fav div and it's list item.

html:

<ul>    
<php? for(....): ?>                            
    <li>
        <div id="sin">
            some stuff 
        </div>
        <div id="son">
            some stuff
        </div>
        <div id="fav">
            something 
        </div>
        <br />
    </li>
<php? endfor; ?>
</ul> 

when mouse over <li> tags "fav" div which belongs to mouse overed list item has to appear.

My unworked jquery code:

$(document).ready(function()
{          
    $("li").hover(function(){
        $("#fav").show()},
        function () {
        $("#fav").hide()
    });
});

Answer 1

here you have

$(document).ready(function()
{
    $('.fav').hide();
    $("li").hover(function(){
        $(".fav",$(this)).show()},
        function () {
        $(".fav",$(this)).hide()
    });
});

you need to use the context with $(".fav",$(this)). instead of $(".fav").. Also you've to change from id to class like

                            <li>
                                <div class="sin">
                                    some stuff
                                </div>

                                <div class="son">
                                    some stuff
                                </div>

                                <div class="fav">
                                    something
                                </div>
                                <br />
                            </li>

Answer 2

The problem is that you are using same id multiple times. You need to use class="fav" instead of id="fav"

//for #sin and #son also

$(document).ready(function()
{          
    $("li").hover(function(){
        $("#fav").show()},
        function () {
        $("#fav").hide()
    });
});

should be

$(document).ready(function()
{          
    $("li").hover(function(){
        $(this).find(".fav").show()},
        function () {
        $(this).find(".fav").hide()
    });
});