afbeelding en text in een link hover effect geven

Door Piet Jansen op 22-02-2013 23:43

2.395 views

Beste mensen,

Ik zou graag willen weten hoe je er voor kan zorgen dat als ik een lijst van links hebt, waarbij elke link bestaat uit een bijhorende logo en daarnaast de naam van de link, er een mouseover effect verschijnt op zowel de logo als de tekst van de link. Dus als ik op het tekstgedeelte van de link kom, moet de logo ook een hover effect krijgen. Als ik op de logo kom met mijn muis, moet de tekst van de link ook een mouseover effect krijgen.

Dit systeem is al door PHPHulp gebruikt, bij de links bovenaan bij het hoofdmenu.

Wie kan mij vertellen hoe dit moet en eventueel een Fiddle maken hiervoor?

Alvast bedankt!

Mvg,
Piet

Jan Koehoorn

23-02-2013 10:25

HTML


<ul>
    <li><a id="item-01">item 01</a></li>
    <li><a id="item-02">item 01</a></li>
</ul>

CSS


ul         { width: 200px;}
ul li      {}
ul li a    {display:block; padding: 5px 5px 5px 25px; font: 12px Monaco;}
#item-01   {background: url(bg-01.jpg) 0px 0px no-repeat;}
#item-01:hover {background: url(bg-01-hover.jpg) 0px 0px no-repeat;}

Eddy E

23-02-2013 10:50 gewijzigd op 23-02-2013 10:54

Of je plaatst de 2 plaatjes onder elkaar (boven gewoon, onderin de 'hover').
En dan alleen maar wat schuiven met de achtergrond-positie. Is iets moeilijker, maar je hebt maar 1 plaatje nodig ipv 8 (of 10 etc) stuks.

Dus zoiets:
(ik ga uit van een plaatje van 100px breed en 50px hoog per stuk.
Dus totaal plaatje (tiles) wordt 5x100px = 500px breed en 2x50px = 100px hoog.

ul         { width: 200px;}
ul li      {}
ul li a    {display:block; padding: 5px 5px 5px 25px; font: 12px Monaco; background: url(bg.jpg) 0px 0px no-repeat;}

/* positie*/
#item-01   	{background-position: 0px 0px;}
#item-01:hover  {background-position: 0px 50px;}

#item-02   	{background-position: 100px 0px;}
#item-02:hover  {background-position: 100px 50px;}

#item-03   	{background-position: 200px 0px;}
#item-03:hover  {background-position: 200px 50px;}

#item-04   	{background-position: 300px 0px;}
#item-04:hover  {background-position: 300px 50px;}

#item-05   	{background-position: 400px 0px;}
#item-05:hover  {background-position: 400px 50px;}

Reageren

Inloggen om te reageren