show, ukryj DIV z mouseover, mouseout

Chcę utworzyć proste rozwijane menu z div, ale mam ten problem: kiedy przechodzi mój przycisk div show całkiem dobrze, ale gdy mysz wychodzi z mojego pola link (w tym przypadku pokaż/ukryj tekst) mój div idzie ukryć. jak mogę zmienić przycisk obszaru ukrywania? ponieważ w moich plikach nie mogę wybrać linków w rozwijanym dziale div.show, ukryj DIV z mouseover, mouseout

HTML kod:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Papermashup.com | Sliding Div</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="dropdown/drop.js" type="text/javascript"></script> 
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/> 

</head> 

<body> 
<a href="#" class="show_hide">Show/hide</a><br /> 
    <div class="slidingDiv" style="width:103px;height:60px;"> 
     <img alt="" height="80" src="images/dropdown.png" width="103"> 
    </div> 
</body> 
</html>

kod CSS:

.show_hide { 
    display:none; 
}

kod JavaScript:

$(document).ready(function(){ 


    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

$('.show_hide').mouseover(function(){ 
    $(".slidingDiv").slideToggle(); 
}); 
$('.show_hide').mouseout(function(){ 
    $(".slidingDiv").slideToggle(); 
}); 

});

Źródło

2012-10-31 Mohamamdreza Siahpoosh

Trzeba owinąć link i div do tego samego pojemnika, a następnie wiążą wydarzenie tam.

<div class="wrapper"> 
    <a href="#" class="show_hide">Show/hide</a><br /> 
    <div class="slidingDiv" style="width:103px;height:60px;"> 
     <img alt="" height="80" src="images/dropdown.png" width="103"> 
    </div> 
</div>

Następnie, a następnie dopasowujemy wydarzenie do show_hide, wiążemy je do klasy "wrapper".

Źródło

2012-10-31 14:44:56 roacher

czy możesz dać mi przykład tego? ponieważ kiedy to robię, moje rozwijanie przechodzi w szalony tryb ukrywania show –

jeśli tak, to nie zrobiłeś tego, co napisałem :) http://jsfiddle.net/RPdQW/2/ – roacher

Dziękuję bardzo za roacherze –

Oprócz odpowiedzi @ roachera konieczne jest również dokładne przycięcie opakowania div do obrazu poprzez ustawienie szerokości.

Można również wymienić mouseover/mouseout sparowanie z hover

I wreszcie, nie jestem pewien, że chcesz ustawić przesuwając wysokość div mniejszy (60px) niż obraz (80px)?

jsFiddle tutaj

Źródło

2012-10-31 14:57:51 StuartLC

Dziękuję bardzo koleś –

show, ukryj DIV z mouseover, mouseout

Odpowiedz

Powiązane problemy