1. дома
  2. Вопрос и ответ
  3. Как управлять jquery show hide для каждого из них?

Как управлять jquery show hide для каждого из них?

2011-02-08 1 views
1

Как управлять jquery show hide для каждого из них? Я хочу mouseover 111, показать Привет 1. mouseover 222, показать Hello 2. mouseover 333, показать Привет 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>

источник

2011-02-08 yuli chika

ответ

2

Попробуйте использовать парить, как указано ниже:

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

Рабочий пример @:

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

источник

2011-02-08 14:18:19 Chandu

+0

приятный exmaple. работать хорошо. –

0

Используйте этот $(".menu", this) вместо $(".menu").

источник

2011-02-08 14:13:34

0

Попробуйте это:

$(".link").hover(
    function(){ 
    $(this).next("div.menu").fadeIn("fast"); 
    }, 
    function(){ 
    $(this).next("div.menu").fadeOut("fast"); 
    } 
);

источник

2011-02-08 14:17:48

1 
$(".link").mouseover(function() { 
    $(this).closest('li').find('.menu').show('slow'); 
}); 

$(".menu").mouseout(function() { 
    $(this).hide("slow"); 
});

источник

2011-02-08 14:18:43

Смежные вопросы

 Смежные вопросы