Wie man anchor-tag auf Hintergrundbild des div?

HTML:

<div id="facey">
    <a href="http://www.facebook.com.au"></a>
</div>

css:

#facey {
    float: left;
    width: 32px;
    height: 32px;
    background: url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

#facey:hover {
    background-position: 0 -32px;
}

Ich habe ein css-sprite für social media icons und ich habe versucht, setzen Sie einen Anker-tag auf Sie, zu gehen, um dort über den jeweiligen websites, und ich bin nicht sicher, wie es funktioniert, weil die sprite-Bilder sind als Hintergrundbilder verwendet und die Anker-tag scheint nicht zu funktionieren für mich im div? Ich bin mir nicht sicher, was im tun falsch hier?

InformationsquelleAutor elroyz | 2013-04-10

  1. 8

    Hinzufügen CSS Stil display:block; zu #facey a.

    danke Mann , warum display:block machen, dass die Arbeit jetzt?
    diesen Beitrag.

    InformationsquelleAutor Vucko

  2. 2

    Setzen Sie den hintergrund auf dem Anker und nicht auf das div-Element, es ist das anchor-tag, das anklickbar ist am Ende. Die div ist eigentlich völlig überflüssig hier.

    <a href="http://www.facebook.com.au" id="facey"></a>

a#facey {
  float: left;
  width:32px;
  height: 32px;
  display: block;
  background:url(file:///C|/Users/User/Documents/TAFE%20-%20Web/ICAWEB411A%20Design%20simple%20web%20page%20layouts/testing%20color/icons/facey%20sprite.png) no-repeat 0 0;
}

a#facey:hover {
  background-position:0 -32px;
}

    InformationsquelleAutor Richard

  3. 0

    Können Sie nicht auf Dateien aus dem Dateisystem wie, dass, wird es als eine Sicherheitslücke in jedem anderen browser, als den IE. Versuchen Sie es mit relativen Pfaden statt:

    #facey {
    float: left;
    width:32px;
    height: 32px;
    background:url(icons/facey%20sprite.png) no-repeat 0 0;
    }

    InformationsquelleAutor cimmanon

Schreibe einen Kommentar