Social ikoner hover funktion

Tags: bootstrap sprites

Bruger #879 @ 29.07.14 17:37

Hej

Jeg har et lille problem som jeg ikke rigtig kan se mig ud af, jeg har en stak sociale ikoner der måler 24x24 de er lavet som sprites der består af 24x48px billeder. Måden det skulle virke på er som en hover funktion så den skifter mellem de ikoner i hver sprites. Jeg kan ikke lige se mig ud af hvordan det kan laves.

Min kode ser sådan her ud

HTML kode

 <div class="social_icons">
 <a href="" target="_blank"><img class="img-circle img-responsive" src="img/social-icons/facebook.png" width="24" height="24" border="0" alt="Facebook"></a>
 <a href="" target="_blank"><img class="img-circle img-responsive" src="img/social-icons/twitter.png" width="24" height="24" border="0" alt="Twitter"></a>
 <a href="" target="_blank"><img class="img-circle img-responsive" src="img/social-icons/gplus.png" width="24" height="24" border="0" alt="Google+"></a>
 </div>

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 29.07.14 20:54

4.283

Du mangler lige det sidste. :o)

Nu ved jeg ikke hvordan dine sprites er skruet sammen. Koden herunder burde dog give retningen. :o)

CSS kode

 .social_icons a{
      width: 24px;
      height: 24px;
      display: inline-block;
  }
  
  .social_icon_facebook{
      background: url(../img/social-icons/facebook.png) left top no-repeat;
  }
  
  .social_icon_facebook:hover{
      background-position: left bottom;
  }

Indlæg senest redigeret d. 29.07.2014 20:55 af Bruger #10216

Bruger #17081 @ 29.07.14 19:30

1.258

du skal gøre det som baggrunds billeder i stedet for almindelige billeder

Bruger #10216 @ 29.07.14 19:31

4.283

Du dropper dit <img> og sætter din sprite som baggrund på <a>.

Når et hover sker, så flytter du baggrundsbilledet op, ned, højre eller venstre (afhænger af sprite)

Indlæg senest redigeret d. 29.07.2014 19:31 af Bruger #10216

Bruger #879 @ 29.07.14 20:39

Så har jeg prøvet at rode lidt med det men syntes ikke rigtig jeg kan få det til at spille

HTML kode

 <div class="social_icons">
 <a href="" class="img-circle img-responsive social_icon_facebook" target="_blank" />
 </div>

CSS kode

 .social_icons a{
     width: 24px;
     height: 24px;
 }
 
 .social_icon_facebook{
     background-image: url(../img/social-icons/facebook.png");
 }
 
 .social_icon_facebook:hover{
     background-position: 24px 0px;
 }

Bruger #879 @ 29.07.14 21:52

Super, nu virker det bare 100% mange tak.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler