it-swarm.com.de

Bildwechsel beim Hover mit CSS / HTML

Ich habe dieses Problem, wenn ich ein Bild festgelegt habe, um ein anderes Bild anzuzeigen, wenn die Maus darüber fährt. Das erste Bild wird jedoch weiterhin angezeigt und das neue Bild ändert Höhe und Breite nicht und überlappt das andere. Ich bin noch ziemlich neu in HTML/CSS, daher habe ich vielleicht 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;
}
72
user2704743

Eine Lösung besteht darin, das erste Bild wie folgt als Hintergrundbild 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 Überbild eine andere Größe hat, müssen Sie diese wie folgt einstellen:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
81
Aurelio De Rosa

Eine andere Option ist die Verwendung von JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
94
kurdtpage

Normalerweise erstelle ich ein Doppelbild mit beiden Zuständen, das wie ein Film mit zwei Einzelbildern wirkt, den ich dann als Hintergrund für das ursprüngliche Element verwende, sodass für das Element Breite/Höhe in Pixeln festgelegt ist nur eine Hälfte des Bildes. Der Schwebezustand definiert dann im Grunde "Film bewegen, um das andere Bild anzuzeigen".

Stellen Sie sich zum Beispiel vor, dass das Bild ein grauer Tux sein muss, den wir beim Schweben in einen bunten Tux ä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 stellen Sie schließlich den Schwebeflug ein, um den Hintergrund einfach um 25 Pixel nach links zu verschieben.

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:

Two-frame Tuxie "film"

Vorteile sind:

  • Durch das Einfügen beider Frames in eine Datei wird sichergestellt, dass sie gleichzeitig geladen werden. Dies vermeidet die hässlichen Störungen bei langsameren Verbindungen, wenn der andere Rahmen niemals sofort geladen wird, so dass der erste Schwebeflug niemals richtig funktioniert.

  • Es kann einfacher sein, Ihre Bilder auf diese Weise zu verwalten, da "gepaarte" Bilder niemals verwechselt werden.

  • Mit der intelligenten Verwendung von Javascript oder der CSS-Auswahl können Sie dies erweitern und noch mehr Frames in eine Datei einfügen.

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

Beachten Sie, dass dies mit der CSS-Eigenschaft background erstellt wurde. Wenn Sie diese also wirklich mit <img /> Verwenden müssen, müssen Sie nicht die Eigenschaft src festlegen da überlappt das den hintergrund. (Stellen Sie sich vor, dass ein geschickter Einsatz von Transparenz zu interessanten Ergebnissen führen könnte, die jedoch wahrscheinlich stark von der Qualität des Bildes und der Engine abhängen.).

51
Alois Mahdal

Verwenden Sie 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

32
Vucko

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

Was ich tue, ist, dass ich das Originalbild und das Schwebebild in ein Element lege und das Schwebebild zuerst verstecke. Dann zeige ich beim Hover-In das Hover-Image an und verstecke das alte, und 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.

5
Y2H
.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>

Um zu versuchen, die gute Antwort von 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 möglicherweise ein anderes), sodass die Klasse "hover_image" dort abgelegt wurde.

Vorteile:

  • Wenn Sie beide Bild-URLs an derselben Stelle zusammenhalten, können Sie diese ändern.

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

  • Es ist selbsterklärend.

  • Das Hover-Bild wird vorgeladen (keine Verzögerung nach dem Hover).

5
Darío Pm

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

Dies wird mit der CSS-Eigenschaft box-sizing: border-box; (Es gibt Ihnen die Möglichkeit, eine Art Hover-Effekt auf ein <IMG> sehr effizient.)

Wenden Sie dazu eine Klasse wie die folgende 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 hilft einigen von euch, die kein Div setzen wollen, um ein Bild mit einem "Hover" -Effekt zu erhalten.

Geben Sie hier den Beispielcode ein:

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");
});
4
Nishanth Shaan

Sie können mit CSS keine Bild-SRC-Attribute ändern (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");
    }
);
3
Asaf

Ändern Sie das img -Tag in ein div und geben Sie ihm einen Hintergrund in CSS.

.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>
1
Rashid

überprüfe dies Geige

Ich denke, der Bildpfad könnte in Ihrem Fall falsch sein

die Syntax sieht richtig aus

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

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

1
iBet7o

versuchen Sie es mit einem 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 ein Bild als Schaltfläche in einem 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";
        }
1
Adiii

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;
}

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

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

Wenn Sie (aus irgendeinem Grund) das Hintergrundbild eines Bildes nicht ändern möchten, können Sie das Bild auch wie folgt in einen div-Container stellen:

HTML:

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

... und so weiter.

0
T.Meyer

Wenn jeder mit der Option "Hintergrundbild" antwortet, fehlt ihm ein Attribut. Durch die Höhe und Breite wird die Containergröße für das Bild festgelegt, die Größe des Bildes selbst wird jedoch nicht geändert. Die Hintergrundgröße wird benötigt, um das Bild zu komprimieren oder zu dehnen, 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');
}
0
Fi Horan

Verwenden Sie einfach Photoshop und erstellen Sie zwei Bilder desselben Typs, wobei das erste so aussieht, wie Sie möchten, und das zweite so aussieht, wie Sie möchten, wenn Sie den Mauszeiger darüber halten. Ich hülle das Bild in ein <a> tag, weil ich davon ausgehe, dass es das ist, was du willst. In diesem Beispiel mache ich ein Facebook-Symbol, das entsättigt ist, aber wenn ich den Mauszeiger darüber halte, 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>
0
Phong Ly

Das Problem ist, dass Sie das erste Bild über das Attribut 'src' setzen und dem Bild beim Hover 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');
}
0
Tomzan

Hier ist der einfache Trick. Einfach kopieren und einfügen.

<!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>       
0
Lokesh Thakur

Live-Beispiel: JSFiddle

Die akzeptierte Antwort weist ein Problem auf. Das Bild wurde dort nicht verändert. Verwenden Sie die Eigenschaft für die Hintergrundgröße, um die Größe des Bildes 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;
}
0
Md. Rafee

So wie du Dinge tust, wird es nicht passieren. Sie ändern das Hintergrundbild des Bildes, das vom Originalbild blockiert wird. Ändern der Höhe und Breite wird auch nicht passieren. 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 (Text) -Feld ändern und ein Hintergrundbild haben, 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, wonach du fragst :)

0
Daniel Schwarz