[CSS] link hover delay

[X-trace]

Ik heb een pagina met veel links, die in een list staan. Dit laatste lijkt me verder geen probleem, maar misschien heeft het er mee te maken. Maar nu heb ik een mouseover toegevoegd waarbij de achtergrondkleur veranderd. Werkt mooi en is leuk, maar in Internet Explorer is er een vertraging. Het lijkt niet zo soepel te gaan als bijvoorbeeld in Firefox. Haal ik de background weg in de A:hover, dan werkt het prima. Het lijkt of Internet Explorer blijft hangen op die background.
Is er een manier om dit wel mooi te krijgen?

[RobIII]

Ik vrees dat je hier tegen de limieten van de oude Trident engine van IE aan loopt; althans: dan neem ik wel aan dat je onder "veel links" ook echt "veel" bedoelt en niet 25. En ja, dan is IE dus gewoon traag. Helaas peanut butter. Je zou een JS alternatief kunnen maken maar ik vrees dat 't erger performed en daarbij is je HTML dan ook nog eens onnodig groot/zwaar of je moet onload aan alle anchors dynamisch events gaan hangen.

[ Voor 30% gewijzigd door RobIII op 04-02-2009 15:15 ]

[X-trace]

Javascript lijkt me inderdaad niet een mooie oplossing en zal op een index (rond de 500-800 links) niet echt bevorderlijk wezen voor de snelheid. Maar wat dan ook weer apart is dat ik bijvoorbeeld een pagina heb met allemaal thumbnails (rond de 40). Deze zijn voorzien van een mouseover, maar alleen de 'color' van titel veranderd en de 'border-color' van de thumbnail zelf. Boven en onder de dump staat een pagina navigatie. Deze is voorzien van de mouseover background-color effect. Firefox slikt het goed en verbazingwekkend Internet Explorer 6 ook. Maar Internet Explorer 7 is weer vaag: de pagenav boven de thumbnails heeft een delay, terwijl de pagenav onder de thumbnails gewoon normaal werkt. Heeft de plaats van de link dan ook nog invloed?

[_JGC_]

Gebruik je veel background images in je pagina, en dan met name background-repeat? Mijn ervaring met IE7 is dat het baggertraag wordt als een achtergrondplaatje mbv background-repeat vaak herhaald wordt.

[mcDavid]

Heb je een linkje naar de site of een codevoorbeeld? Het kan zijn dat er maffe dingen in je code staan, al gok ik dat RobIII gelijk heeft en het gewoon belabberde prestaties van IE zijn.

Maar gaat het in IE7 wel goed?

[X-trace]

De voorbeeld uit mijn tweede post staat hier. In dat ontwerp heb ik de background-color op de index vermeden vanwege de slechte ervaring. Ik kan deze wel inschakelen om het te laten zien.
De background-image gebruik ik bijna altijd en soms ook als repeat (met name body bg).

[Verwijderd]

heb je toevallig op _elke_ link een event handler zitten? Da's veel om in de gaten te houden, veel instanties van dezelfde method ook. Handiger is een handler op een containerelement te zetten en dan de target (/srcElement) uit te vragen. De events bubblen toch wel omhoog

[X-trace]

Ik heb inderdaad een 'algemene' link even gezet met de code:

code:

A,
A:link,
A:active,
A:visited { color:red; }
A:hover { color:green; }

Vervolgens zet ik voor een list item ook de eigenschappen, bijvoorbeeld:

code:

UL.block LI A,
UL.block LI A:link,
UL.block LI A:active,
UL.block LI A:visited { /**/ }
UL.block LI A:hover { /**/ }

Bedoel je dit? En dat ik dan de eerste weg moet laten?

[_JGC_]

Maak die wrapper-left-bg.gif en wrapper-right-bg.gif eens wat groter, 100 pixels hoog bijvoorbeeld. Internet Explorer wordt enorm traag als het vaak een background-image moet repeaten. De bestandsgrootte van een 12x1 pixel gifje zal niet veel groter worden als je dat ding 12x100 pixels maakt.