MouseOver Text nach "tab"-drücken invisible setzen

[DavidTü]

Hallo,

ich habe mit Hilfe von CSS eine MouseOver Funktion definiert. Die funktioniert soweit auch. D.h. sobald ich mit der Maus mich in einer Tabellenspalte befinde wird der Text der innheralb des span Tags steht angezeigt.

Umgesetzt habe ich das mit folgendem CSS Style:

tr.tooltip {
  position: relative;
  text-decoration: none;      
}
  
tr.tooltip:hover {
  background: transparent;
}

tr.tooltip span {
  display: none;  
  text-decoration: none; 
}

tr.tooltip:hover span {
  display: block;  
  position: absolute;
  left: 237px;
  yposition -10px;
  width: 200px;
  z-index: 100;
  color: #000000; 
  border:1px solid #CCC; 
  background: #ffffaa;
  font: 12px Verdana, sans-serif; 
  text-align: left;
}

Der dazugehörige HTML Code:

<tr class="tooltip">
  <td colspan="1" rowspan="1" class="label" width="225px">Label</td> 
  <td colspan="1" rowspan="1" class="label" width="225px">
     <input type="text" ..>
     <span><br><p>MouseOver text</p><br></span>
  </td>
</tr>

<!-- mehrere solche Zeilen hintereinander -->

Mein PRoblem ist nun wenn ein Mouseover Text angezeigt wird und ich mit der "TAB" Taste in das nächste Eingabefeld wechsle, dann wird immernoch der Mouseover text des ersten Eingabefeld angezeigt

 

[SpiceLab]

Die Pseudoklasse :hover gilt für das Überfahren der HTML-Elemente mit der Maus. Werden diese jedoch mit der Tab-Taste angesteuert, gilt hier :focus.

Siehe das Kapitel :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente).

 

[DavidTü]

ok vielen Dank,

da habe ich mich wohl falsch ausgedrückt.
Mir ist bewußt das ich mit focus einen Style bei Wechseln per Tab Taste festlegen kann.

Mein Problem ist eher, dass wenn ich per Tab-Taste ins nächste Eingabefeld wechsle, dass noch der hover-style des Element auf den die Maus zeigt dargestellt wird. Eine Idee wie ich das per css lösen könnte ?

Habe ja im Ausgangspost mal den Code gepostet wie der hover Text eingeblendet wird.

 

[SpiceLab]

Du hast dich nicht falsch ausgedrückt bzw. ich hab schon verstanden, worauf du hinaus willst.

Meines Wissens gibt es keine CSS-Lösung, wenn du vom vorherigen Überfahren eines Elements mit der Maus zum nächsten Element per Tab-Taste springst, um die noch gültige :hover-Pseudoklasse aufzuheben.