Effetto hover con jquery

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
Salve a tutti.

Volevo sapere come poter realizzare, se possibile, un semplice effetto su un menù al passaggio del mouse.
Ho un <li> di 100px e quando passo con il mouse vorrei che si allungasse a 130px.
E' possibile?

grazie a tutti
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi anche evitare jquery e usare la proprietà transition dei css3
HTML:
<style>
    ul {        
        list-style-type: none;
        color:white;
    }
    ul li {
        width: 100px;
        -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s;
        background-color: red;
        padding:3px 0;
    }
    ul li:hover {
        width: 130px;
    }
</style>

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
 

lorenzo84

Utente Attivo
22 Lug 2012
239
0
16
Grazie per la risposta. Con jquery sono riuscito a fare questo e sembra funzionare:

Codice:
$("#menuvert li").on('mouseenter',function(){
		  $(this).animate({"margin-left": "-15px"}, "fast");
		});
		$("#menuvert li").on('mouseleave',function(){
		  $(this).animate({"margin-left": "0px"}, "fast");
		});
 
Discussioni simili
Autore Titolo Forum Risposte Data
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
F mappa jquery con effetto hover + fancybox Javascript 1
S [HTML] Effetto hover in un div HTML e CSS 6
F Come si chiama questo effetto hover? Javascript 1
P Effetto a:hover sempre attivo solo se si và su una voce del sottomenu HTML e CSS 1
G Eliminare l'effetto refresh di una pagina internet PHP 8
E telecamera effetto nebbia IP Cam e Videosorveglianza 0
S [Photoshop] Nome di questo effetto (vedi foto) Photoshop 1
S [HTML] Effetto su testo da togliere HTML e CSS 0
F [Photoshop] Effetto "vetro" Photoshop 1
A [Photoshop] come poter realizzare il seguente "effetto" Photoshop 4
P [Photoshop CC] Come posso creare quest'effetto - cerchi concentrici Windows e Software 6
P [Photoshop] Effetto ombra Photoshop 1
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
trattorino [Javascript] effetto carino sul click mi aiutate? Javascript 1
M [Photoshop] Come posso creare questo effetto ? Photoshop 2
T [Javascript] identico carousel con effetto fade: in una pagina va in un'altra no, mistero? Javascript 3
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
MimmoMandrillo [Photoshop] Che effetto è questo? Photoshop 3
R [Photoshop] Come creare questo effetto (v.immagine)?(sovrapposizione immagini in modo uniforme) Photoshop 2
D [Photoshop] Come arrivare a questo effetto? Photoshop 4
S [Photoshop] aiuto effetto glitch scanner (scanner art) Photoshop 1
A Effetto hue-rotate con javascript Javascript 2
elpirata Creare scritte flash effetto dinamico Flash 2
A [HTML] Menu con effetto slide down HTML e CSS 0
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
D effetto con adobe muse Windows e Software 1
X [Photoshop] Cercasi strumento per ottenere un semplice effetto. Photoshop 6
F [HTML] Effetto fade su ogni immagine contenute in uno slider HTML e CSS 16
M [Photoshop] come realizzare un effetto speciale? Photoshop 1
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
R Effetto sul testo Javascript 3
K Effetto psichedelico Flash 0
G Effetto mosso tipo calce. Photoshop 1
P Effetto spruzzo di profumo Photoshop 1
J Aggiunta di un effetto di transizione al plugin Quick Pager jQuery 0
L effetto galleria popup (immagini) jQuery 1
M effetto del testo css HTML e CSS 1
Z Effetto pennello con Flash Flash 0
P Visualizzare video mp4 con effetto lightbox jQuery 1
L Effetto fade a div Javascript 1
F effetto movimento immagini jquery jQuery 3
matteoraggi Come si fa a ricreare l'effetto dei pesciolini? WordPress 3
F Effetto comparsa header Javascript 2
J effetto sliding dors come cover per entrare in un sito JQ Javascript 0
D Effetto foto come quella di Mika Photoshop 1
P Effetto lente su testo Javascript 1

Discussioni simili