[CSS] Active link background-color

[slm]

Voor een upload gedeelte van een onderhoudsmodule maak ik een overzicht van de geuploade bestanden.

Deze bestanden worden weergegeven in de vorm {icoon} {naam} en kunnen door er 1x op te klikken geselecteerd worden. Dubbelklikken is openen.

Zodra een file geselecteerd wordt, wordt door middel van CSS de achtergrond blauw gekleurd, zoals je ook in Windows kan zien:

Cascading Stylesheet:

.flist tbody a:active {
 color: #FFF;
 text-decoration: none;
 background-color: #0A246A;
 border: 1 px dotted #000;
}

Probleem is het volgende:
In Mozilla en Opera wordt de achtergrond van de link bij het aanklikken kortstondig blauw gekleurd, maar daarna verdwijnt het weer. In Explorer blijft de link wél blauw. Heeft iemand een idee om dit makkelijk ook in Mozilla en Opera goed te krijgen?


Nu is dat voor de overzichts/lijst-modus niet zo'n probleem aangezien de tekst van de link in ieder geval nog omlijnd is, maar voor de thumbnail-view is dit wel problematisch.

Dit komt omdat een weergegeven thumbnailed file bestaat uit:

code:

<a id='id..' 
  href='void..' 
  onfocus='actie()' 
  ondblclick='andereactie()' 
  onmouseover='noganders()' 
  class='thumbnail'>
 <img>
 <div>Naam</div>
</a>

Hoe kan ik nu ook in Mozilla et al de selectie zichtbaar maken zonder in elke link voor deze browsers een extra javascript te gebruiken?

NB. De 'Naam'-div wordt gebruikt om de tekst via CSS automatisch af te kappen op een bepaalde breedte en te padden met puntjes.

Voorbeeld van de overzicht-weergave staat hier

[coubertin119]

:active wordt enkel getriggerd als de muis ingedrukt is. http://www.w3.org/TR/CSS2...ml#dynamic-pseudo-classes

IE6 doet het dus fout. :focus zou van toepassing zijn, ware het niet dat het geen input-alike ding is. Je zal dus zelf wat dingen er in moeten scripten lijkt mij.

[slm]

Met a:focus erbij blijft de link in Mozilla wél blauw (thx!). Mozilla doet het kennelijk dan ook niet goed

In de Thumbnail focus doet Mozilla het nu ook, alleen moet je dan op de boundary klikken en niet ergens in het midden van de thumbnail (?) of met Tab van link naar link gaan.

Opera weigert pertinent...

edit:

Btw, als je de pagina oproept van de onderhoudsmodule, wordt er een parameter meegegeven welke file actief moet staan (als er al voor een bepaald veld iets is geupload). Aan het eind van het script wordt dan een javascript functie opgeroepen (zie onder). Op dat moment staat zowel in IE, Mozilla als Opera de link wél blauw. Vreemde zaak dat Opera het op dat moment wel accepteert..

code:

<script language="JavaScript" type="text/javascript">
var d = document.getElementById("eenplaatje.jpg");
 if (d) {
  d.focus();
 }
</script>

Edit 2
En over je opmerking dat het geen input accepteert: dat doet het wel. Als je een link actief maakt, kan je op Enter klikken om hem te openen. Wat dat betreft zou je dus haast zeggen dat Opera het in deze fout doet, ware het niet dat je in Opera niet van link naar link kan hoppen met de Tab toets...

[ Voor 72% gewijzigd door slm op 12-06-2004 17:49 ]