호버 JQuery와는

Question

좋은 아침, 나는 지금 내가 jQuery로 호버 효과를 만들 수 있습니다 할 경우 싶습니다

움직입니다. 사용자가 마우스를 이미지 위로 올린 다음 일부 텍스트와 함께 토글 효과를 표시 할 수 있습니까? 어떻게해야합니까?

사용자가 이미지를 '클릭'할 때 토글 효과가 작동하지만 간단한 호버로 동일한 효과를 만들고 싶습니다.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("#flip1").click(function(){ 
       $("#panel1").slideToggle("500"); 
      }); 
      $("#flip2").click(function(){ 
       $("#panel2").slideToggle("500"); 
      }); 
      $("#flip3").click(function(){ 
       $("#panel3").slideToggle("500"); 
      }); 
     }); 
     </script> 

이 JQuery와 함께 가능 :

이 내 코드? 당신은 mouseenter 및 mouseleave 이벤트를 사용할 수 있습니다

Answer 1

시도해보십시오.

$(document).ready(function(){ 
    $("#flip1").hover(function(){ 
     $("#panel1").stop(true).slideToggle("500"); 
    }); 
    $("#flip2").hover(function(){ 
     $("#panel2").stop(true).slideToggle("500"); 
    }); 
    $("#flip3").hover(function(){ 
     $("#panel3").stop(true).slideToggle("500"); 
    }); 
}); 

hover()이

당신은 당신은 hover 이벤트를 사용하여 한 손을 등록 할 수 있습니다

<img id="flip1" data-panel="#panel1" src="..." /> 

스크립트

$(document).ready(function(){ 
    $("#flip1, #flip2, #flip3").hover(function(){ 
     $($(this).data('panel')).stop(true).slideToggle("500"); 
    }); 
}); 

Answer 2

감사합니다,

안부, ... .hover() 그것을

$("#flip1").hover(function() { 
    $("#panel1").stop(true).slideToggle("500"); 
}); 

을하거나 한 번

모든 핸들러를 등록하는 바로 가기를 제공합니다

$("#flip1, #flip2, #flip3").hover(function() { 
    $("#panel" + this.id.replace('flip', '')).stop(true).slideToggle("500"); 
}); 

Answer 3

처럼 image에 data-panel을 사용할 수 읽기 LER start with selector 사용하여, 다음의 진보를 가져오고 그에 따라 상대 패널을 보여

$("[id^=flip]").hover(function() { 
    $("#panel" + this.id.replace('flip', '')).stop(true).slideToggle("500"); 
}); 

데모 : http://jsfiddle.net/IrvinDominin/C3kRp/