CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

mac10 Nybegynder

06. juni 2011 - 15:46 Der er 6 kommentarer og
1 løsning

jQuery hover function på flere divs?

Hej eksperter,

Jeg har bygget en lille function som gør følgende:
Når jeg peger på et div (cart) så kommer der et andet div frem lige nedenunder det (cart_under). Indtil jeg fjerner musen fra enten cart eller cart_under så skal cart_under stadigvæk være tilgængelig.

Det hele virker fint, lige bortset fra at kombinationen af de 2 divs ikke virker som det skal. Så snart jeg "trækker" musen fra cart over til cart_under så kører min animation igen.

Min kode

$("#cart, #cart_under").hover(function () {
$('#cart_under').animate({"top": "90px"}, { duration: 500 });
}, function () {
$('#cart_under').animate({"top": "-210px"}, { duration: 500 });
});

Er der nogle jQuery eksperter i huset som kan hjælpe mig med at fjerne min hovedpine?

Synes godt om

jakobdo Ekspert

06. juni 2011 - 21:37 #1

Prøv dette:

<html>
<head>
<title>Jquery Cart</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#cart_under").hide();
$("#cart").hover(
function () {
$("#cart_under").show();
},
function () {
$("#cart_under").hide();
}
);
});
</script>
<style type="text/css">
div{
width:200px;
height:200px;
}
div#cart{
background-color:red;
}
div#cart_under{
background-color:blue;
}
</style>
</head>
<body>
<div id="cart">
<div>CART</div>
<div id="cart_under">CART_UNDER</div>
</div>
</body>
</html>

Det er dog uden animation...
Men det kan altid tilføjes...

Synes godt om

mac10 Nybegynder

07. juni 2011 - 09:10 #2

Hej jakobdo,

Det her virker fint:

$(function() {
$("#cart_under").hide();
$("#cart, #cart_under").hover(
function () {
$("#cart_under").show();
},
function () {
$("#cart_under").hide();
}
);
});

Jeg byttede lige din linje:
$("#cart").hover(

Ud med:
$("#cart, #cart_under").hover(

Så den forbliver åben selv når man peger på #cart_under

Og så virker det fint, men så snart jeg sætter animationen på så virker det ikke igen. Er det noget med animation der ikke virker? Har leget en del med jQuery og er helt fascineret af det, men må ærligt indrømme at jeg ikke er en haj til det :-)

Synes godt om

jakobdo Ekspert

07. juni 2011 - 09:34 #3

Prøv at bemærk at cart_under er inde i div'en CART.

<div id="cart">
<div>CART</div>
<div id="cart_under">CART_UNDER</div>
</div>

Det er måske det du gør forkert?

Synes godt om

mac10 Nybegynder

07. juni 2011 - 09:57 #4

Det var lige det guldkorn jeg havde brug for, det med at ligge det i samme div :-) Har lagt et div tag uden om begge de andre divs og sat hover på det istedet for.

Jeg har bygget det lidt om og gjort brug af position:relative til de elementer det skal "udover" samt brug a z-index og det virker perfekt nu.

Jeg bukker og takker for din hjælpsomme hånd som gjorde min dag meget bedre.

Du må meget gerne smide et svar, og selvom du ikk samler på point så lad mig da i det mindste stadigvæk godkende dit svar med 1 point eller et eller andet, for du har virkelig hjulpet.

Synes godt om

jakobdo Ekspert

07. juni 2011 - 10:10 #5

Svar!
Og jeg tager gerne mod point.

Synes godt om

mac10 Nybegynder

07. juni 2011 - 11:17 #6

Perfekt :-)

Der er bare så mange herinde der ikke vil have point, og det kan godt være neder at skulle give point til sig selv for at lukke selvom andre har fortjent dem for at hjælpe.

Men så er den skid slået, endnu engang tak for hjælpen.

Synes godt om

jakobdo Ekspert

07. juni 2011 - 11:20 #7

Takker for point.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02
js til asp backend Af keepy i JavaScript	1	11/10/202310:28	11/10/202313:46

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS