2016-09-12 2 views
0

Ein kleiner Hintergrund. Ich habe gesucht und gesucht. Es gibt viele Antworten für HINZUFÜGEN eines Rahmens bei Hover, aber keiner, den ich gefunden habe, wo die Tabelle einen 1px weißen Randstil hat, ob schwebend oder nicht. Das Bild springt beim Schweben. Ich habe versucht, box-sizing: border-box und Hinzufügen derselben Farbe Grenze zu Hover-Stil. Diese Seite ist alt und ich war nicht der ursprüngliche Entwickler. Es wird mit Tabellen anstelle von divs erstellt. Wir stellen sie auf eine neue Seite um, aber diese soll in der Zwischenzeit mit neuen Bildern aktualisiert werden. Ein Schwarz-Weiß und eine andere Farbe. Wenn Sie die Maus über das Schwarz-Weiß-Bild bewegen, wollen sie, dass es sich an die Farbe Eins wendet. Wir verwenden ein Sprite, das 400px (w) mal 240px (h) beträgt. Die Bilder sind 120px hoch, also nur die Position für den Hover-Effekt ändern.

HTML
<td class="bottom right left stlouis"></td>
CSS Image Swap bei Hover-Sprüngen mit Rahmen

CSS

.stlouis { 
    width: 400px; 
    height: 120px; 
    background-image: url(../images/stlouis.jpg); 
    background-position: 0 0; 
} 

.stlouis:hover { 
    background-position: bottom; 
} 

Vielen Dank für Ihre Hilfe!

+0

versuchen, gleiche "Einheiten" für die Position zu halten .... so auf '.stlouis' bg-Position: oben links und auf Schwebeflug bg-Position: unten links – DaniP

+0

danke für den Tipp. Ich habe es geändert, aber immer noch das gleiche Problem. Sobald ich die Grenze entferne, funktioniert es gut. – lsumarkb

Antwort

2

Falls sowieso nach einer Lösung für dieses Problem suchen, behoben display: block; das Problem.