Ändern des Bildes beim Schweben mit CSS / HTML

77

Ich habe dieses Problem, bei dem ich ein Bild so eingestellt habe, dass beim Bewegen der Maus ein anderes Bild angezeigt wird. Das erste Bild wird jedoch weiterhin angezeigt, und das neue Bild ändert weder Höhe noch Breite und überlappt das andere. Ich bin noch ziemlich neu in HTML / CSS, daher habe ich möglicherweise etwas Einfaches verpasst. Hier ist der Code:

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
html css image hover user2704743
quelle

Antworten:

88

Eine Lösung besteht darin, auch das erste Bild als Hintergrundbild wie folgt zu verwenden:

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

Wenn Ihr Schwebebild eine andere Größe hat, müssen Sie sie wie folgt einstellen:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
Aurelio De Rosa
quelle
danke, ändert dies auch die Höhe und Breite des neuen Bildes beim Schweben?
user2704743
Wenn Ihr Schwebebild eine andere Größe hat, müssen Sie sie schreiben.
Aurelio De Rosa
Ich habe Ihre Lösung genau wie gezeigt ausprobiert, aus irgendeinem Grund, obwohl sich die Größen nicht ändern, funktioniert der Schwebeflug jedoch
user2704743
Ja, ich habe das Update gelesen, also habe ich mein img-Tag in div geändert und dann kopiert, was Sie hier haben. Es hat den Schwebeflug behoben, aber weder das erste Bild noch das Schwebebild ändern ihre Größe. Ich bin mir nicht sicher, warum?
user2704743
Nein, ich meinte den Teil "Wenn Ihr Überbild eine andere Größe hat, müssen Sie sie so einstellen:"
Aurelio De Rosa
99

Eine andere Option ist die Verwendung von JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
kurdtpage
quelle
5
Und während dies eine alte Lösung wiederbelebt, ist es wirklich eine schlechte Praxis, Stile in HTML einzubetten. Alle Stilinformationen sollten oben in der HTML-Datei in Stil-Tags enthalten oder über ein externes Stylesheet verknüpft sein.
die
Gibt es eine Möglichkeit, das Bild reibungslos zu überführen?
CliffVandyck
@thedigitalmouse guter Punkt, ich habe meine Antwort aktualisiert und CSS entfernt
kurdtpage
@CliffVandyck Sie könnten möglicherweise jQuery Animation verwenden, um das zu tun
kurdtpage
49

Normalerweise erstelle ich mit beiden Zuständen ein Doppelbild, das sich wie ein Zwei-Frame-Film verhält, den ich dann als Hintergrund für das ursprüngliche Element verwende, sodass für das Element die Breite / Höhe in Pixel festgelegt wird, was zu einer Anzeige führt nur eine Hälfte des Bildes. Dann definiert der Schwebezustand im Grunde "den Film bewegen, um das andere Bild zu zeigen".

Stellen Sie sich zum Beispiel vor, dass das Bild ein grauer Smoking sein muss, den wir beim Schweben in einen farbenfrohen Smoking ändern müssen. Und das "Hosting" -Element ist eine Spanne mit der ID "tuxie".

  1. Ich erstelle ein 50 x 25 Bild mit zwei Smoking, eines in Farbe und eines in Grau.
  2. Weisen Sie dann das Bild als Hintergrund für eine Spanne von 25 x 25 zu.
  3. und schließlich den Schwebeflug so einstellen, dass der Hintergrund einfach um 25 Pixel nach links verschoben wird.

Der minimale Code:

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

und das Bild:

Zwei-Frame-Tuxie "Film"

Vorteile sind:

  • Durch das Einfügen beider Frames in eine Datei wird sichergestellt, dass sie gleichzeitig geladen werden. Dies vermeidet den hässlichen Fehler bei langsameren Verbindungen, wenn der andere Frame nie sofort geladen wird, sodass der erste Schwebeflug nie richtig funktioniert.

  • Es ist möglicherweise einfacher, Ihre Bilder auf diese Weise zu verwalten, da "gepaarte" Frames niemals verwechselt werden.

  • Mit der intelligenten Verwendung von Javascript oder CSS Selector kann man dies erweitern und noch mehr Frames in eine Datei aufnehmen.

    Theoretisch könnten Sie sogar mehrere Schaltflächen in eine Datei einfügen und deren Anzeige anhand von Koordinaten steuern, obwohl ein solcher Ansatz schnell außer Kontrolle geraten könnte.

Beachten Sie, dass dies mit der backgroundCSS-Eigenschaft erstellt wird. Wenn Sie also wirklich mit <img />s verwenden müssen, dürfen Sie die Eigenschaft nicht festlegen, srcda dies den Hintergrund überlappt. (Denken Sie, dass ein geschickter Einsatz von Transparenz hier zu interessanten Ergebnissen führen könnte, aber wahrscheinlich sehr stark von der Bildqualität und der Engine abhängt.)

Alois Mahdal
quelle
2
+1 Für die Verwendung von "Sprites" beschleunigen Sprites das Laden von Seiten. SpriteMe ist ein gutes Online-Tool, mit dem Sie Sprites für eine vorhandene Website erstellen können. Es ist sehr nützlich, Sprites schneller zu erstellen, da das neue CSS und die neuen Bilder für Sie erstellt werden.
Jagb
33

Verwendung content:

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

Vucko
quelle
1
Ich denke, das ist die beste Lösung. Es ist einfacher, verwendet das richtige <img> -Tag und muss sich nicht um Hintergrundwiederholungen und ähnliches kümmern.
Lombas
2
Ich fand das browserabhängig. Funktioniert in Chrome, aber nicht in Firefox oder IE11.
Chaz
@Chaz die überprüfen Browser - Kompatibilität .
Vucko
@Vucko, ich glaube, das Kompatibilitätsproblem betrifft die Verwendung des Inhaltsattributs für etwas, das nicht: vorher oder: nachher ist. Über den Link Browserkompatibilität: Die CSS-Eigenschaft content wird mit den Pseudoelementen :: before und :: after verwendet, um Inhalte in einem Element zu generieren. Probieren Sie die obige JSFiddle in Firefox oder IE aus. es funktioniert nicht.
Chaz
7 

.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}
<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>
Erweitern Sie das Snippet

Um zu versuchen, die gute Antwort dieses Rashid zu verbessern, füge ich einige Kommentare hinzu:

Der Trick wird über den Wrapper des auszutauschenden Bildes ausgeführt (diesmal ein 'a'-Tag, aber vielleicht ein anderes), sodass die' hover_image'-Klasse dort abgelegt wurde.

Vorteile:

  • Das Zusammenhalten der URL beider Bilder an derselben Stelle hilft, wenn sie geändert werden müssen.

  • Scheint auch mit alten Navigatoren zu funktionieren (CSS2-Standard).

  • Es ist selbsterklärend.

  • Das Schwebebild ist vorinstalliert (keine Verzögerung nach dem Schweben).

Darío Pm
quelle
4

Das Problem bei allen vorherigen Antworten ist, dass das Hover-Bild nicht mit der Seite geladen wird. Wenn der Browser es aufruft, dauert das Laden einige Zeit und das Ganze sieht nicht wirklich gut aus.

Ich füge das Originalbild und das Schwebebild in ein Element ein und verstecke zuerst das Schwebebild. Beim Hover-In zeige ich dann das Hover-Bild an und verstecke das alte. Beim Hover-Out mache ich das Gegenteil.

HTML:

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript / jQuery:

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

Dies ist für mich der einfachste und effizienteste Weg, dies zu tun.

Y2H
quelle
3

Sie können das Bild eines HTML-IMG ersetzen, ohne Änderungen am Hintergrundbild des Container-Div vornehmen zu müssen.

Dies wird mithilfe der CSS-Eigenschaft erreicht box-sizing: border-box;(Sie haben die Möglichkeit, eine Art Hover-Effekt <IMG>sehr effizient auf einen zu setzen .)

Wenden Sie dazu eine Klasse wie diese auf Ihr Bild an:

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

Beispielcode: http://codepen.io/chriscoyier/pen/cJEjs

Originalartikel: http://css-tricks.com/replace-the-image-in-an-img-with-css/

Hoffe, dies wird einigen von euch helfen, die kein Div setzen wollen, um ein Bild mit einem "Hover" -Effekt zu erhalten.

Hier den Beispielcode posten:

HTML:

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery:

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});
Nishanth Shaan
quelle
Jemand hat meine Antwort abgelehnt. Bitte erläutern Sie, warum Sie mich abgelehnt haben, um die Antwort zu verstehen und zu verbessern.
Nishanth Shaan
2

Sie können CSS nicht zum Ändern von Bild-SRC-Attributen verwenden (es sei denn, der Browser unterstützt dies). Möglicherweise möchten Sie jQuery mit dem Hover-Ereignis verwenden.

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);
Asaf
quelle
1

Ändern Sie das imgTag in ein div und geben Sie ihm einen Hintergrund in CSS.

Jacques ジ ャ ッ ク
quelle
1 

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}
<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>
Erweitern Sie das Snippet

Rashid
quelle
2
Fügen
0

Überprüfen Sie diese Geige

Ich denke, der Bildpfad kann in Ihrem Fall falsch sein

Die Syntax sieht richtig aus

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
Vignesh Subramanian
quelle
0

Das Problem ist, dass Sie das erste Bild über das Attribut 'src' festlegen und beim Hover dem Bild ein Hintergrundbild hinzufügen. Versuche dies:

in HTML verwenden: 

<img id="Library">

dann in css:

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
Tomzan
quelle
Danke, was muss ich ändern, um dieses Problem zu beheben?
user2704743
Ihre Lösung hat mit dem Hover funktioniert, aber die Größe der Bilder hat sich nicht geändert?
user2704743
Willst du, dass es sich ändert? Wenn ja, fügen Sie einfach hinzu: Schwebeklasse der richtigen Größe.
Tomzan
0

So wie du Dinge tust, wird es nicht passieren. Sie ändern das Hintergrundbild des Bildes, das vom Originalbild blockiert wird. Das Ändern der Höhe und Breite wird ebenfalls nicht stattfinden. Um das src-Attribut des Bildes zu ändern, benötigen Sie Javascript oder eine Javascript-Bibliothek wie jQuery. Sie können das Bild jedoch in ein einfaches Div-Feld (Textfeld) ändern und ein Hintergrundbild erstellen, das sich beim Hover ändert, obwohl das Div-Feld selbst leer ist. Hier ist wie.

<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

Ich hoffe das ist was du fragst :)

Daniel Schwarz
quelle
Hallo, ich habe diese Lösung ausprobiert. Sie behebt das Hover-Problem, behebt jedoch nicht die Größe. Sie bleiben gleich. Was kann ich tun?
user2704743
Scheint für mich zu arbeiten. Können wir Ihren Code sehen? Hier ist meins: jsfiddle.net/kHBzh
Daniel Schwarz
0

Bei jeder Antwort mit der Option "Hintergrundbild" fehlt ein Attribut. Die Höhe und Breite legen die Containergröße für das Bild fest, ändern jedoch nicht die Größe des Bildes. Hintergrundgröße wird benötigt, um das Bild zu komprimieren oder zu strecken, damit es in diesen Container passt. Ich habe das Beispiel aus der 'besten Antwort' verwendet

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
Fi Horan
quelle
0

versuchen Sie einen von ihnen 

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

oder wenn Sie das Bild als Schaltfläche im Formular verwenden

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }
Adiii
quelle
0

Meine jquery Lösung.

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

und html

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

Demo: JSFiddle-Demo

Grüße

iBet7o
quelle
0

Live-Beispiel: JSFiddle

Die akzeptierte Antwort hat ein Problem. Das Bild wurde dort nicht in der Größe geändert. Verwenden Sie die Eigenschaft für die Hintergrundgröße, um die Bildgröße zu ändern.

HTML:

<div id="image"></div>

CSS:

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}
Md. Rafee
quelle
0

Ich würde empfehlen, wenn möglich nur CSS zu verwenden. Meine Lösung wäre:

HTML: 

<img id="img" class="" src="" />

CSS:

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

Dies (ohne das src- Attribut zu definieren) stellt auch sicher, dass transparente Bilder (oder Bilder mit transparenten Teilen) korrekt angezeigt werden (andernfalls würden Sie auch Teile des ersten Bildes sehen, wenn das zweite Bild halbtransparent wäre).

Das Attribut Hintergrundgröße wird verwendet, um die Höhe und Breite eines Hintergrundbilds festzulegen.

Wenn Sie (aus irgendeinem Grund) das BG-Bild eines Bildes nicht ändern möchten, können Sie das Bild auch wie folgt in einen Div-Container einfügen:

HTML:

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

... und so weiter.

j3141592653589793238
quelle
0

Verwenden Sie "content:;" am Schwebeflug. Das funktioniert.

Tadashi BK
quelle
Sie sollten einige weitere Details zu Ihrer Antwort hinzufügen
Akhilesh Mishra
-1

Verwenden Sie einfach Photoshop und erstellen Sie zwei gleiche Bilder. Das erste ist das, wie es aussehen soll, das zweite ist, wie es aussehen soll, wenn Sie den Mauszeiger darüber halten. Ich wickle das Bild in ein <a>Tag ein, weil ich davon ausgehe, dass es das ist, was Sie wollen. In diesem Beispiel mache ich ein Facebook-Symbol, das entsättigt ist, aber wenn Sie den Mauszeiger darüber halten, wird die blaue Farbe von Facebook angezeigt.

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>
Phong Ly
quelle
1
Dies erfordert Javascript; hat OP nicht nach einer CSS / HTML-Lösung gefragt?
m02ph3u5
-1

Hier ist der einfache Trick. Kopieren Sie es einfach und fügen Sie es ein.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>
Lokesh Thakur
quelle
-1

Ich hatte ein ähnliches Problem.

Mit meinem Button wie folgt definiert:

<button  id="myButton" class="myButtonClass"></button>

Ich hatte das Hintergrund-Styling wie folgt:

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

Als ich es auf:

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

Die Hover-Over-Funktion hat einwandfrei funktioniert.

(Nicht auf andere Attribute wie Größe und Position des Bildes oder des Containers eingehen, sondern nur das Hintergrundbild ändern)

Wolfsschild
quelle