Avatar billede 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?
Avatar billede 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...
Avatar billede 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 :-)
Avatar billede 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?
Avatar billede 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.
Avatar billede jakobdo Ekspert
07. juni 2011 - 10:10 #5
Svar!
Og jeg tager gerne mod point.
Avatar billede 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.
Avatar billede jakobdo Ekspert
07. juni 2011 - 11:20 #7
Takker for point.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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