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