Legen Sie Höhe und Breite hintergrund :hover-element

Momentan habe ich diesen code

#navlogo {
    background: url(img/logo.png);
    background-size: 100px;
    display: block;
    height: 98px;
    width: 98px;
    border-radius: 49px;
}

und ich wollen fügen Sie diesen code

#navlogo:hover {
    background:url(img/logoblog.png);
    display: block;
    height: 98px;  /* this doesn't work */
    width: 98px;   /* this doesn't work */
}

Th original Bilder 150x150 verkleinert und für einige Grund, die besser Aussehen, als mit 98x98 vor allem auf dem iPhone. Jedoch kann ich nicht scheinen, um die hintergrund-Größe für die :hover-element ....es bleibt die ursprüngliche Größe. Ich weiß, es kann getan werden, mit background-size: 98px 98px; aber das ist auch nicht kompatibel mit IE8 und niedriger, und CSS3PIE nicht gerade hintergrund-Größe entweder. gibt es trotzdem, dies zu tun, oder muss ich die Größe der hover-Bild?

  • Du sagst, dass das div-ändert die Größe auf hover? Das macht keinen Sinn. Es muss mehr an der Geschichte.
  • Ich denke, logoblog muss größer sein als das logo und die er braucht, um die Größe zu ändern. Aber ich kann nicht sehen, warum es ein problem gibt. Wenn das Bild in ein div sollte es funktionieren, sollte es nicht ?
InformationsquelleAutor gcoulby | 2013-03-08
  1. 1

    Ändern Sie die hintergrund-Größe aus einem definierten 100px enthalten. Wenn Sie die änderung der div-Größe zu schweben, dann sind die hintergrund-Größe ändern, wenn Sie es in diesem Szenario.

    E. G.:

    #navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}

#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px;               /*this doesn't work*/
width: 98px;                /*this doesn't work*/
}

    Gehe ich davon aus, dass das, was Sie für gehen in diesem Beispiel, wie die Eigenschaften, die Sie angeben, "nicht-Arbeit" in der hover-styling sind das zurücksetzen der gleichen Werte, die in dem normalen Zustand-styling. Nichts würde sich ändern, da Sie genau das gleiche definiert.

    BEARBEITEN

    Wenn die logoblog Bild ist in der Tat größer, Einstellung der background-size-Eigenschaft auf "enthalten" sollte dieses problem lösen, da gut.

    • Ich denke, putting "enthalten" nur in die betreffende element könnte es tun.
    • Das funktioniert, aber funktioniert es auch mit IE als hintergrund-Größe ist CSS£ und nicht unter CSS3PIE
    • Welche Versionen des IE ?
    • Die enthalten version funktioniert in den Versionen 9 und höher für den IE.
    • 8 minimum, aber ich würde gern weniger, wenn möglich.
    • ist es möglich dieses problem zu lösen, mit IE8 oder soll ich die einfach exportieren, eine kleinere version?
    • Wenn Sie schauen, um Unterstützung, acht, brauchen Sie ein Bild für den hintergrund ist die tatsächliche Größe, die Sie angezeigt haben möchten. Sie können noch immer die background-size-Regeln, und dann fügen Sie einfach ein override über IE Conditional Comments

    InformationsquelleAutor Josh Burgess
Schreibe einen Kommentar