[JQuery] Mouse dentro, Mouse fuori e cambio del contenuto

**Threepwood** · 31-05-2012, 12:07

Salve a tutti, sto cercando di fare una funzione Jquery che cambi il contenuto di un div sul mousein e mouse out.

Esempio

codice:

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").hover(function(){
    	$("span").replaceWith( "SECONDN TEXT
SECOND TEXT" );
    },function(){
		$("span").replaceWith( "FIRST TEXT
FIRST TEXT" );
  });
});
</script>
</head>
<body>
<p style="background-color:red; position:absolute"><span id="a">FIRST TEXT
FIRST TEXT</span></p>
</body>
</html>

Questo FUNZIONA sul mouse IN, ma non fa nulla sul mouse Out

Qui potete provare il codice live: http://www.w3schools.com/jquery/tryi..._html_text_set

Mi date una mano? Grazie!

**robynosse** · 31-05-2012, 12:21

Così funziona

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$("span").html( "SECONDN TEXT
SECOND TEXT" );
},function(){
$("span").html( "FIRST TEXT
FIRST TEXT" );
});
});
</script>
</head>
<body>
<p style="background-color:red; position:absolute"><span id="a">FIRST TEXT
FIRST TEXT</span></p>
</body>
</html>

Ciao

**Threepwood** · 31-05-2012, 13:08

ottimo, molto meglio

Ho provato a modificarlo con due immagini a non mi funziona l'uscita

codice:

<hml>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$("span").html( "<img src=images/b_agent.png>" );
},function(){
$("span").html( "aaa" );
});
});
</script>
</head>
<body>
<p style="background-color:red; position:absolute"><span id="a">[img]images/b_studio.png[/img]</span></p>
</body>
</html>

**Threepwood** · 31-05-2012, 14:19

qui lo puoi provare con delle immagini già fatte... funziona solo il primo over

codice:

<hml>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$("span").html( "<img src=http://icons.iconseeker.com/png/fullsize/valentine-hearts/say-yes.png>" );
},function(){
$("span").html( "<img src=http://icons.iconseeker.com/png/fullsize/tron/bit-yes.png>" );
});
});
</script>
</head>
<body>
<p style="background-color:red; position:absolute"><span id="a"></span></p>

</body>
</html>

**robynosse** · 31-05-2012, 15:02

Così funziona:

codice:

<hml> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").hover(function(){ $("img").attr("src", "http://icons.iconseeker.com/png/fullsize/valentine-hearts/say-yes.png" ); },function(){ $("img").attr("src", "http://icons.iconseeker.com/png/fullsize/tron/bit-yes.png" ); }); }); </script> </head> <body> <p style="background-color:red; position:absolute"><span id="a"></span></p>  </body> </html>

**Threepwood** · 31-05-2012, 15:29

Grazie

Forse ho omesso il risultato che voglio ottenere: nel mouse in devo rimpiazzare il contenuto con un div embeed, e sul mouse out far ritornare l'immagine

**Threepwood** · 01-06-2012, 10:07

in pratica l'obiettivo è:

BASE: immagine
MOUSE OVER: cambio immagine con oggetto Embeed (flash)
MOOSE OUT: rimetto immagine

STEP2: possibilmente con un timeout prima di attivare il mouse over

Grazie in anticipo!

**Virus_101** · 01-06-2012, 11:54

No

1 crea un contenitore con 2 div
2 primo di ha il contenuto di default ed e' acceso
3 secondo div e' vuoto e gli innesti il contenuto che ti serve

3 usa l'evento mouseenter() e fai
3.1 insseti contenuto in div2
3.2 spegni div1
3.3 accendi div 2

4 all'uscita mouseout
4.1 spegni div2
4.2 accendi div1
4.3 cancelli contenuto div2

MOOOOOOOOOlto piu' semplice di qualsiasi altra soluzione

**Threepwood** · 04-06-2012, 15:42

Grazie!

(edit) Sembra che funziona

ti aggiorno appena l'ho fatto per bene!

**Virus_101** · 04-06-2012, 15:46

facce sapere

Discussione: [JQuery] Mouse dentro, Mouse fuori e cambio del contenuto

Strumenti discussione

Ricerca discussione

Visualizza

[JQuery] Mouse dentro, Mouse fuori e cambio del contenuto

Permessi di invio