Hover k obrázkovému odkazu – CSS – Fórum – Programujte.com

Zdravím jde nějak nadefinovat hover k obrázkovému odkazu? Přesněji, mám obrázek jako odkaz a hover bych si představoval další obrázek. Zkoušel jsem:

HTML:

<a href="index.html"><div class="link1"> </div></a>

.link1 {position:relative;

        top:0px;

        left:15px;

        width:140px;

        background: url("images/menu/news.gif");

        background-repeat:no-repeat;}

.link1 a:hover {background-image: url("images/menu/newsOG.gif");}

<a href="index.html"><img src="images/menu/news.gif" alt="news"></a>

.leftbox a:hover {background-image: url("images/menu/newsOG.gif");

					background-repeat:no-repeat;

					background-postition:0 bottom;}

Odkaz - a - jakožto řádkový element by neměl obalovat div, což je blokový element. Místo toho zkus z odkazu udělat blokový element pomocí vlastnosti display: block, nastav mu šířku a výšku podle obrázku, hover pak zavoláš přímo na ten odkaz. Mohlo by to vypadat nějak takto:

HTML:

<a href="#" class="blockLink"></a>

.blockLink{

  display: block;

  width: 100px;

  height: 100px;

  background: url('image1.png') 0 0 no-repeat;

}

.blockLink:hover{

  background: url('image2.png') 0 0 no-repeat

}

Díky moc, takhle jsem si to představoval :)