show, nascondi DIV con mouseover, mouseout

Voglio creare un semplice menu a discesa con div ma ho questo problema: quando si passa sopra il mio pulsante div show piuttosto buono ma quando il mouse esce dal mio campo di collegamento (in questo caso mostra/nascondi testo) il mio div va nascosto. come posso cambiare il pulsante della mia area nascosta? perché nei miei file non posso selezionare collegamenti in dropdown div.show, nascondi DIV con mouseover, mouseout

codice

HTML:

<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>

codice CSS:

.show_hide { 
    display:none; 
}

codice JavaScript:

$(document).ready(function(){ 


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

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

});

fonte

2012-10-31 Mohamamdreza Siahpoosh

È necessario avvolgere il collegamento e il div nello stesso contenitore, poi si legano l'evento lì.

<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>

Quindi, piuttosto che aspettando l'evento per show_hide, si legano alla classe 'wrapper'.

fonte

2012-10-31 14:44:56 roacher

u può darmi mostrano un esempio di questo? perché quando faccio questo il mio menu a cascata va in modalità show hide pazzo –

se lo fa, allora non hai letto quello che ho postato :) http://jsfiddle.net/RPdQW/2/ – roacher

grazie mille roacher –

In aggiunta alla risposta di @ roacher, sarà inoltre necessario ritagliare il wrapper div strettamente sull'immagine impostando una larghezza.

Si può anche sostituire l'abbinamento mouseover/mouseout con un hover

E, infine, non sono sicuro che si desidera impostare lo scorrimento altezza del div più piccolo (60px) rispetto all'immagine (80px)?

jsFiddle qui

fonte

2012-10-31 14:57:51 StuartLC

grazie mille tipo –

show, nascondi DIV con mouseover, mouseout

risposta

Problemi correlati