2011-02-08 2 views
1

각 jquery show hide를 제어하는 ​​방법은 무엇입니까? mouseover 111, show hello 1. mouseover 222, show hello 2. mouseover 333, show hello 3. 감사합니다.각 jquery show hide를 제어하는 ​​방법은 무엇입니까?

<head> 
    <style> 
     .menu{ display:none; } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head> 
<body> 
<ul> 
    <li> 
     <a href="" class="link">111</a> 
     <div class="menu">Hello 1</div> 
    </li> 
    <li> 
     <a href="" class="link">222</a> 
     <div class="menu">Hello 2</div> 
    </li> 
    <li> 
     <a href="" class="link">333</a> 
     <div class="menu">Hello 3</div> 
    </li> 
</ul>  
<script> 
$(document).ready(
function(){ 
    $(".link").mouseover(function(){ 
    $(".menu").show(".slow"); 
    }); 
    $(".menu").mouseout(function() { 
    $(".menu").hide("slow"); 
    }); 
}); 
</script>  
</body> 

답변

2

은 호버를 사용해보십시오 아래에 주어진 :

$(document).ready(
    function(){ 
     $(".link").hover(function(){ 
     $(this).next().show("slow"); 
     },function() { 
     $(this).next().hide("slow"); 
     }); 
    }); 

근무 예를 들어, @ :

http://jsfiddle.net/6hTZR/3/

+0

좋은 예. 잘 작동합니다. –

0

대신 사용 $(".menu")$(".menu", this).

0

이 시도 :

$(".link").hover(
    function(){ 
    $(this).next("div.menu").fadeIn("fast"); 
    }, 
    function(){ 
    $(this).next("div.menu").fadeOut("fast"); 
    } 
); 
1
$(".link").mouseover(function() { 
    $(this).closest('li').find('.menu').show('slow'); 
}); 

$(".menu").mouseout(function() { 
    $(this).hide("slow"); 
}); 
관련 문제