Salve. Vorrei chiedere come realizzereste una cosa del genere:
- in un riquadro di determinate dimensioni,
- c'è un link (testo + immagine come sfondo nel padding) che occupa solo una parte del riquadro;
- quando si va sopra il link, vorrei che, al di sopra del primo riquadro (coprendo quindi anche il link), ne comparisse un secondo delle stesse dimensioni e che questo poi scomparisse quando col mouse si esce dalla sua area, quindi un tipico esempio di mouseover/mouseout.
Tramite solo CSS funziona perfettamente, mi piacerebbe però dare un po' di animazione all'effetto comparsa/scomparsa del div tramite jquery e ho fatto un po' di tentativi, ma ci sono degli effetti strani:
- muovendosi col puntatore del mouse nell'area del div in sovraimpressione, andando in alcune zone il div scompare, come se partisse l'evento di mouseout;
- ogni tanto fa un po' di flickering (scintillio).
Il codice html è tipo il seguente:
codice:
<div id="container">
Link
<div class="overlay">..............</div>
</div>
e il codice js che ho messo a punto è il seguente:
codice:
$(document).ready(function() {
$('div#container a').mouseover(function() {
$('div.overlay').stop().show();
});
$('div.overlay').mouseout(function() {
$(this).stop().hide();
});
});
Cosa sto sbagliando?
Grazie