Css link image hover

[b1vRiP]

yaptığım bir web sitesinde solda duran menüde yazılar yerine resim olacak ve üstüne gelince resim değişecek. her link için ayrı ayrı resim lazım.
ben şöyle yaptım

a:link.urunmenubir
{
display:none;
display: block;
width: 171px;
height: 39px;
background: transparent url(urunlermenu1.jpg) no-repeat;
}
a:hover.urunmenubir,a:visited.urunmenubir
{
display:none;
background-position: -171px 0;
}

İlk kategori

display:none çalışıyor ama içini göstermeme yapmıyor direk bu a'nın olması gereken yer de kayboluyor. display:none 'u silince de arkaplanla ilgili bir muhabbet olmuyor herşey eskisi gibi kalıyor.

bi yerde hata mı yapıyorum acaba?

[b1vRiP]

a.urunmenubir
{
display: block;
width: 171px;
height: 39px;
background: transparent url(urunlermenu1.jpg) no-repeat;
}
a:hover.urunmenubir,a:visited.urunmenubir
{
background-position: -171px 0;
}

şimdi şöyle yaptım
arkaplan resmi çıkıyor ama -171px olarak çıkıyor ben onu hover olunca istiyorum şu haliyle hover edince bişi çıkmıyor.
ayrıca display:none'u da sildiğim için h2 de gözüküyor onu nasıl uçurabilirim?

[b1vRiP]

fail oldum ya off :) kafam patlamış
visited ı kaldırınca oldu. neden çünkü test ederken tıkladım zaten o sayfadaydım. yine de işine yarayan olursa bakabilir işte :)

[Ractamainus]

biri visited'ı kaldırmak
diğeri de text-indent: -9999; yapmak

ayrıca display: none; display: block; yazmışsın aynı attr içine.. sonuncusu çalışır, birincisi gereksiz.. zaten none da olmaması lazım.

[b1vRiP]

h2 ye display:none yaptım

[Sypro]

DOM falan katıp halletme şansın yok mu ?

onmouseover, onmouseout ve onload ile işini halledersin güzelce..

[Ractamainus]

h2'ye display:none yapmışsa, zaten DOM'a inmiş demektir.. zira a'nın hover attribute'unden h2'ye müdahale edemezdi.

css'ten çözecekse de text-indent yapabilirdi.

[4Ever]

Şimdi link'e display:block veriyorsun ve div özelligi kazandırıyorsun, sonra background kadar width ve height veriyorsun, daha sonra icindeki yazıları yok etmek icin text-indent:-9999px veriyorsun. yazı olmayan backgroundu olan link cıkıyor ortaya

Örnek:

TEST LINK

Css:

.link {
display:block:
width:100;
height:100;
background: ();
text-indent:-9999px;
}

.link:hover {
background-position:
}

yapacagın işlem bu kadar :)