Auswahlliste in Bereich, der nur bei hover angezeigt wird

[clax]

In einem Bereich, der nur angezeigt werden soll, wenn mit der Maus über ein Bild gefahren wird (hover), wird (u.a.) eine gewöhnliche Auswahlliste (Formularelement) gezeigt.

Das Problem: Wird die Auswahlliste angeklickt, verschwindet der eingeblendete Bereich (inklusive der Liste) in dem Moment, in dem die Maus die Liste überfährt - unabhängig davon, ob die Maus faktisch noch innerhalb des Bereichs liegt, der bei hover eingeblendet wird, oder nicht.

  
<style type="text/css">  
a.tooltip span.invisible {  
  display: none;  
}  
a.tooltip:hover span.invisible {  
  display: block;  
}  
</style>  
  
<a class="tooltip">  
<img src="bild.png" alt="Immer sichtbares Bild">  
<span class="invisible">Der Text und die Auswahl, die erscheinen, wenn das Bild mit der Maus überfahren wird:<br>  
<form>  
 <select>  
  <option value="1" selected>Option 1</option>  
  <option value="2">Option 2</option>  
  <option value="3">Option 3</option>  
 </select>  
</form>  
</span>  
</a>  

Wie lässt es sich realisieren, dass die Auswahlliste zwar weiter nur dann erscheint, wenn sich die Maus über dem Bild befindet, sie aber nicht verschwindet, wenn der Nutzer mit der Maus einen Eintrag selektieren möchte?
Getesteter Browser: Firefox 3.5.9

[apsel]

Om nah hoo pez nyeetz, clax!

Für deine Frage habe ich im Moment auch keine Lösung, weil ich ein Online-Beispiel besser fände.

Dennoch ein Tipp im Sinne der Barrierefreiheit: display: none; sorgt dafür, dass auch screen-reader dies nicht zu sehen bekommen. Besser ist es, den Inhalt aus dem sichtbaren Bereich zu verschieben.

Matthias

[MudGuard]

Hi,

<a class="tooltip">
<img src="bild.png" alt="Immer sichtbares Bild">
<span class="invisible">Der Text und die Auswahl, die erscheinen, wenn das Bild mit der Maus überfahren wird:<br>
<form>

Das ist kein HTML - a darf keine blocklevel-Elemente enthalten.

cu,
Andreas