Avatar billede kimdolleris Nybegynder
30. september 2009 - 08:52 Der er 3 kommentarer og
1 løsning

Hover/mouseover/focus (jquery) på selectboxes

Hej, havde oprindeligt lagt dette spørgsmål under et andet - uden sønderlig beskrivende overskrift.

IE reagerer ikke på mouseovers i selectboxes. Er der nogen der kan et workaround af en art?

---------------------KODE--------------------

------------------
SCRIPT:
------------------

<script src="jquery.js" type="text/javascript"></script>

<script> //<![CDATA[

$(document).ready(function(){
 
    $("#eos").hover(function(){
        $('div#tooltip_eos').animate({opacity: "show", top: "331px"}, "fast");
    }, function(){
        $('div#tooltip_eos').animate({opacity: "hide", top: "341px"}, "fast");
    });
 
    $("#udvidet").hover(function(){
        $('div#tooltip_udvidet').animate({opacity: "show", top: "371px"}, "fast");
    }, function(){
        $('div#tooltip_udvidet').animate({opacity: "hide", top: "381px"}, "fast");
    });
 

});

//]]></script>

------------------
HTML:
------------------

<form>
    <select name="selector">
      <option selected="selected" value="#">Vælg destination ...</option>
        <option id="eos" value="/page568.aspx">EU/EØS</option>
        <option id="udvidet" value="/page1005.aspx">Udvidet Europa</option>
        <option value="/page491.aspx">Canada</option>
        <option value="/page563.aspx">USA</option>
        <option value="/page902.aspx">Mellemamerika</option>
        <option value="/page901.aspx">Sydamerika</option>
        <option value="/page904.aspx">Afrika</option>
        <option value="/page903.aspx">Asien</option>
        <option value="/page905.aspx">Oceanien</option>
    </select>
</form>

<div id="tooltip_udvidet">
    <h6>Udvidet Europa:</h6>
    <p>Text.</p>
</div>
<div id="tooltip_eos">
    <h6>EU/EØS:</h6>
  <p>Text.</p>
</div>

------------------
CSS:
------------------
#tooltip_udvidet{width:300px;height:110px;position:absolute;display:none;}
   
#tooltip_eos{width:300px;height:110px;position:absolute;display:none;}

------------------------------------------------

Der er lidt mere css, men det er ikke så væsenligt.

Skidtet virker selvfølgelig i firefox(!)

pft.

Kim
Avatar billede prozone Nybegynder
30. september 2009 - 12:52 #1
Hej.

Hvis jeg var dig, så ville jeg lave det med css, med en a:hover, det ville lære meget lettere :)

// Emil
Avatar billede prozone Nybegynder
30. september 2009 - 12:52 #2
være"
Avatar billede kimdolleris Nybegynder
30. september 2009 - 17:16 #3
Det skal være en selectbox - af en art. OG jQuery fordi det bare er lækrere.. ;)

Så <a> er no go med mindre de kan smides i en selectbox af en art :(
Avatar billede kimdolleris Nybegynder
06. oktober 2009 - 12:00 #4
Prozone! Du havde ret.. Der var ingen vej udenom jeg måtte snyde lidt. Jeg lavede en liste og stylede den.

Færdige resultat kan ses på gouda.dk.

Tak for tippet!
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