Error starting jquery

Question

I have two div elements. HTML looks like this:

<div id="first"><div id="second"></div></div>

CSS for these elements:

#first{ float:left; width:656px; border-bottom:1px solid #CCC; padding-top:5px; display:block; cursor:pointer;}
#second{ float: right; margin-right:10px;  border:1px solid #9F0; width:230px; height:14px; background-color:#FF0; display: none;}

JQuery Code:

$(document).ready(function(){
    $("#first").click(function(event) {
        $("#third").load('index.php');
    });
});

$("#first").live('mouseover', function() {       
    $("div#second").show();
});

$("#second").live('click', function() {       
    $("#fourth").load('somepage.php');
});

What I want to do is when hovering on the first DIV starts the function and the second DIV appears inside the first DIV, the user can click on the second DIV and open "somepage.php". Using this code, the jQuery function for the second DIV is covered by the CSS display unit of the first DIV and both jQuery are launched.

How to pause the jquery click function from the first DIV when starting the second DIV function?

Answer 1

live (.. click/bind ) , false event.stopPropagation().

event.target.id, , .

Answer 2

unbind:

.

$( "# " ) ( "MouseOver" );

, , jquery: http://docs.jquery.com/Events/unbind