Kjapp og trygg hosting for Wordpress

jQuery - Hjelp, for ikke til dette... ;)

Jazz

Medlem
Hei alle sammen

Jeg jobber med nettsted til en cateringfirma, der jeg også lager et handlerkurv system. For å vise denne handlekurven til brukeren, har jeg et link som det står handlekurv på. Tanken er at når brukerens mus kommer over denne lenken, skal en div komme opp med info om hva som er i handlekurven og en link til "kassen"...

det jeg har fått til så langt er at divven vises når brukeren har musen over, og forsvinner når musen er ute. Men problemet er at jeg ønsker at brukeren skal kunne se handlekurven når han går rundt med musen inne på den divven....(er jeg litt uklar nå? ;))

jQuery jeg bruker er:
HTML:
<script type="text/javascript">
$(document).ready(function() {
	$("#cart").hide();
	$("#cartlink").hover(function() {
		$("#cart").show();
	}, function() {
		$("#cart").hide();
	});
});
</script>

her er html:
HTML:
<a href="#" id="cartlink">Handlekurven</a>
	<div id="cart">
her kommer handlekurven med info fra databasen og link til kassen
</div>

og her er css:
HTML:
#cart {
	width: 500px; height: 200px;
	background: black;
	position: absolute;
	margin-left: 300px;
}

er det noen her som kan hjelpe meg med dette? jeg er selvlært html, css, php og mysql, men klarer bare ikke å sette meg inn i javascript/jquery og sånt....

tusen takk for alle svar ;)
 

agrimsrud

Medlem
Slettet forrige forslag.
--------------------
Nytt forslag 21:30:


Ideen er egentlig å legge linken og handlekurven i samme element. Da kan vi bare sjekke mouseover og mouseout på dette "samleelementet".

Testet i både Firefox og Chrome - skal funke bra:

Kode:
jQuery(function($){
        $("#cart").hide();
        $("#cartlink").live('mouseover mouseout', function(event) {
                if (event.type == 'mouseover') {
                        $("#cart").show();
                } else {
                        $("#cart").hide();
                }
        });
});

HTML:
<div id="cartlink">
	<a href="#">Handlekurven</a>
	<div id="cart">
		her kommer handlekurven
	</div>
</div>
 
Sist redigert:
Topp