숨겨진 div를 표시하는 jQuery mouseover 링크

다음 이미지와 같이 extratorrent 사이트에서 mouseover 이벤트를 발견했습니다. 숨겨진 div를 표시하는 jQuery mouseover 링크

alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg

당신은 사용자 이름 링크를 통해 마우스를 올려

, 그것은 숨겨진 DIV를 보여줍니다. 꽤 깔끔하고 매끈한.

저는 jQuery를 처음 사용합니다. 누구든지 올바른 길을 시작하는 방법을 보여줄 수 있습니까? 감사.

업데이트 1 :

내가 좋아하는 뭔가를 쓴 결과를 얻기 위해 시도하는 다음. 문제는 Div가 머물러있는 링크 밖으로 마우스를 가져 가면 즉시 사라진다는 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() 
     { 


    $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); }); 


     }); 
     </script> 

    </head> 

    <body> 

    <a id="show_div" href="#">Link text</a> 
    <div id="hello" style="visibility:hidden;"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
    </div> 


    </body> 
    </html>

Div 위에 마우스를 올려 놓을 때 Div가 보이게하려면 어떻게해야합니까?

출처

2010-06-26 Narazana

링크 텍스트를 마우스로 가리킨 경우 div "hello"의 Visiblility가 표시되도록 설정합니다. 그런 다음 mouseover 할 때 "hello"div를 볼 수있게 div "hello"표시를 설정합니다. div "안녕하세요"의 mouseout에 대한 가시성을 "숨김"으로 설정합니다. 이런 식으로 뭔가 :

$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });

출처

2010-06-26 08:04:14

그래서 3 걸음 씩 걸립니다. 고마워요. – Narazana

이 같은 것을 구현하고 #show_div에 mouseout을 추가해야했습니다. $ ("# show_div") 지연 ("빠름") .css ('visibility', 'hidden');}); 아이디어는 지연 후 목록 항목이 사라져야한다는 아이디어 였지만 작동하지 않습니다. 지연 시간을 가져 가면 마우스가 링크에서 사라지 자마자 목록 항목이 사라집니다. 지연이 있으면 목록 항목이 절대로 없어지지 않습니다. 왜 그런가? 감사!!! – AggieMan

좀 더 자세히 살펴보면 제대로 작동하도록하려면 다음을 수행해야합니다. $ ("# show_div") mouseout (function() {setTimeout (function() {$ (" #hello ") .css ('visibility', 'hidden');}, 200);}); – AggieMan

당신은 .hover 기능을 사용할 수 있습니다 : 당신이 두 개의 div가이

$(function() { 
    $('#divOne').hover(function() { 
     $('#divTwo').show(); 
    }, function() { 
     $('#divTwo').hide(); 
    }); 
});

<div id="divOne">div one</div> 
<div id="divTwo" style="display: none;">div two</div>

UPDATE : 코멘트 섹션 두 번째 사업부에서 언급 한 바와 같이

마우스를 처음으로 놓으면 사라질 것입니다. 원하는 동작을 얻을 수있는 many plugins out there이 있습니다. This one이 특히 좋습니다. 간단한 HTML로

출처

2010-06-26 07:30:52

사용자가 새롭게 표시된 'divTwo'로 마우스를 움직이면 마우스가'divOne'을 떠날 때 아래에서 사라집니다. 이상적인 UX가 아닙니다. –

@ T.J. Crowder, 아주 좋은 발언. –

downvote가 심한 것 같습니다 ... –

<div class="div1">Hover me</div> 
<div class="div2" style="display: none">Hi, there</div>

당신이 div2 보여 div1 통해 전달하고, 사용자가 내부로 들어가 그 후에 만 숨길 다음 종료 :이 빠른

<script type="text/javascript"> 
$('.div1').hover(function() {$('.div2').show()}); 
$('.div2').hover(function() {}, function() {$('.div2').hide()});  
</script>

, 비 최적 솔루션이지만 두 div가 인접하지 않아도 작동합니다.

출처

2010-06-26 07:48:07 Iacopo

사용이

$ (문서) CSTE 연구진(), 기능 ("# 테스트 요소"를 "클릭"{});

출처

2015-08-19 14:30:53

숨겨진 div를 표시하는 jQuery mouseover 링크

답변

관련 문제