animatie van een list

[Plotinus]

L.S.

Ik heb een opsomming van een aantal onderdelen op mijn site en daarvan wil ik graag een animatie maken: als ik erover heen ga (hover) wil ik dat ze even oplichten en/of het opsommingsteken 'stuitert'/beweegt. Iemand een idee waar ik kan vinden hoe ik dit aanpak?

gegroet,
mrt

 

[martijn12321]

Hoe het precies moet, weet ik niet, maar misschien breng ik je hier mee een stukje op weg.
In css kun je met overgangen werken (http://www.w3schools.com/css/css3_transitions.asp ). Je stelt bij het element in de 'normale' modus in dat een bepaalde overgang moet komen. Daarna stel je bij #id:hover in dat bijv de width (of de top om te stuiteren of kleur om te laten oplichten) een andere waarde krijgt.
Ik denk niet dat het je gaat lukken met een list zoals je ze met html maakt, dus je moet denk ik met <img> zelf tekentjes invoegen.

Als je de kleur maar even wil laten oplichten kun je in JS een hover eventlistener toevoegen, de kleur aanpassen, een timer instellen die de kleur weer terug zet.

 

[That Guy]

dat kan alleen met CSS: gebruik de :hover pseudo:

li
{
   list-style-image: url('normal.gif');
}

li:hover
{
    list-style-image: url('move.gif');
}

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>meow</li>
</ul>

 

[Plotinus]

Het is gelukt, dank je That Guy.

Ook dank aan Martijn voor het meedenken.

gegroet,
mrt