Bilder som linker med hover

[Avean]

Tenkte jeg skulle lage noen fancye linker så jeg er avhengig av at linkene mine er bilder.

Problemet er hvordan gjør jeg dette med clean kode og CSS.

 

<ul>
<li><a href="#"><img src="img/link1.png"></a></li>
<li><a href="#"><img src="img/link2.png"></a></li>
<li><a href="#"><img src="img/link3.png"></a></li>
</ul>

 

Den er jo grei, men her er jeg avhengig av å gjøre hover i enten jquery eller javascript, det vil jeg ikke.

 

I CSS så kan jeg enkelt og greit gjøre noe sånt som dette

 

#link1 { background-image: url(img/link1.png); background-repeat: no-repeat; }
#link1:hover { background-image: url(img/link1_hover.png); background-repeat: no-repeat; }

 

Problemet her er at divs er jo ikke ment for å være linker, de vil ikke gjøre noe.

Så er det virkelig ingen måte å gjøre dette her på med CSS ? Har googlet meg ihjel uten noen som har klart dette.

[Avean]

Glem det løste det. Div med visibility: hidden; funker å bruke.

[cbastus]

Jeg ville brukt et sprite map som bakgrunn og forskjøvet det ved hover.

Noe slikt:

<ul>
 <li>
   <a class="first" href="/one/">First</a>
 <li>
 <li>
   <a class="second" href="/two/">Second</a>
 <li>
 <li>
   <a class="third" href="/three/">Third</a>
 <li>
<ul>

<style>
ul
{
 list-style: none;
}
ul li a
{
 display: block;
 width: 140px;
 height: 28px;
 backround: url(sprite-map.png);
 text-indent: -9999px;
 overflow: hidden;
}
ul li a.first        { background-position: 0px 0px; }
ul li a.first:hover  { background-position: 0px -28px; }

ul li a.second       { background-position: -140px 0px; }
ul li a.second:hover { background-position: -140px -28px; }

ul li a.third        { background-position: -280px 0px; }
ul li a.third:hover  { background-position: -280px -28px; }
</style>

Kommentert kode:

 

 

<ul>
 <li>
   <a class="first" href="/one/">First</a>
 <li>
 <li>
   <a class="second" href="/two/">Second</a>
 <li>
 <li>
   <a class="third" href="/three/">Third</a>
 <li>
<ul>

<style>
ul
{
 list-style: none;
}
ul li a
{
 /* Gjør lenkene (a-elementet er et inline-element) om til block slik at vi kan sette en størrelse på det */
 display: block;
 width: 140px;
 height: 28px;

 /* Legg til spritemap som bakgrunn i alle lenkerne */
 backround: url(sprite-map.png);

 /* Fjern tekst fra lenkene ("first", "second" og "third") */
 text-indent: -9999px;
 overflow: hidden;
}

/* Flytt bakgrunnene (sprite-map.png) utfra hvilke lenke det er og om den har mus på seg */
ul li a.first        { background-position: 0px 0px; }
ul li a.first:hover  { background-position: 0px -28px; }

ul li a.second       { background-position: -140px 0px; }
ul li a.second:hover { background-position: -140px -28px; }

ul li a.third        { background-position: -280px 0px; }
ul li a.third:hover  { background-position: -280px -28px; }
</style>

 

 

Edit: la til kommentarer slik at det blir mer forståelig

Endret 1. april 2011 av cbastus