Sebastian: Liste nach hover auf Anfang setzen

Beitrag lesen

SELF-Forum

Liste nach hover auf Anfang setzen

Sebastian
– Informationen zu den Bewertungsregeln

Hallo.
Ist folgendes eigentlich OHNE JAVASCRIPT möglich:

Ich habe eine Combobox mit CSS erstellt:
Titel

  • Unterpunkt1
  • Unterpunkt2
  • Unterpunkt3
  • Unterpunkt4
  • Unterpunkt5
  • Unterpunkt6
  • Unterpunkt7
  • ..

Diese Combobox hat eine :hover Eigenschaft, um sie aufzuklappen, wenn man über "Titel" geht. Es erscheinen dann die Unterpunkte mit einem vertikalen Scrollbalken.

Jetzt das Problem: Wenn man die Combobox mit dem Scrollbalken scrollt scrollt auch der "Titel" mit. Verlässt man nun die Combobox, indem man den Mousecursor neben die Liste bewegt schließt sie sich und dort wo der "Titel" stand steht nun der Teil der Liste, der beim Verlassen der Liste an dessen Position stand.

Optimal wäre es, wenn man mittels CSS OHNE JS beim Verlassen der Liste (und dessen Zuklappen) die Combobox wieder auf Anfang (also auf "Titel") bringen könnte..

MfG,

Sebastian

JSP:
<div class="stupidieGruppe" style="margin-bottom: 1em;margin-left:0.9em;margin-top:1em">
  <a class="aussGruppen" href="#"><span class="menutag">Titel</span>
  <table><tr><td>
      <a class="innen-1" href="..">Unterpunkt1</a>
      <a class="innen-1" href="..">Unterpunkt2</a>
      <a class="innen-1" href="..">....</a>

</td></tr></table>
  </a>
 </div>

CSS:
.stupidieGruppe {
 display: block;
 position: absolute;
 top: 175px;
 left: 193px;
 z-index: 5;
}
a.aussGruppen { /** Die Combobox, wenn sie nicht aufgeklappt ist **/
 float: left;
 width: 166px;
 height: 1.3em;
 overflow: hidden;
 display: block;
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 background-color: #C5DAEB;
 color: #000000;
 border: 1px solid;
 border-color: #C5DAEB;
}
a:hover.aussGruppen { /** Die Combobox, wenn sie aufgeklappt ist **/
 overflow: visible;
 top:30px;
 height: 200px;
 background-color: #C5DAEB;;
 color: #fff;
 overflow-y:scroll;
 height: 200px;
}
a:hover.aussGruppen table { /** Die Tabelle, die beim Mouse-Hover angezeigt wird **/
 display: block;
 background-color: #80A3FF; /* hell-blau*/
 color: #000000;
 border-collapse: collapse;
}
a.innen-1 { /** Die Felder der aufgeklappten Tabelle **/
 display: block;
 width: 164px; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
 padding: 0px 0;
 font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 border-bottom: 1px solid #ffffff;
 background-color: #CDCECE;
 color: #000000;
 font-size: 12px;

}
a:visited.innen-1 { /** Darstellung der besuchten Links der Combobox  **/
 background-color: #CDCECE;
 color:#000000;
}
a:hover.innen-1 { /** Darstellung der Links der Combobox bei Mouse-Hover **/
 position: relative;
 background-color: #80A3FF; /* hell-blau*/
 color: #000000;
}
span.menutag { /** Formatierung für den Titel der Combobox  **/
 display: block;
 cursor: default;
 font-size: 12px;
 position:fixed;
 z-index:10;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln