it-swarm.com.de

Wie mache ich ein Bild in css?

Ich möchte das Bild von normal auf heller ändern, wenn es sich im Schwebeflug befindet. Mein Code:

    <div class="nkhome">
        <a href="Home.html"><img src="Images/btnhome.png" /></a>
    </div>
.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
    width:59px;
    height:59px;
}
.nkhome a img:hover {
    background:url(Images/btnhomeh.png);
    position:absolute;
    top:0px;
}

Warum funktioniert der Schwebeflug nicht? Wenn meine Maus darauf ist, wird das erste Bild angezeigt, nicht das Schwebeflugbild.

10
greenthunder

Sie haben ein a-Tag, das ein img-Tag enthält. Das ist Ihr normaler Zustand. Sie fügen dann einen background-image als Hover-Status hinzu und erscheinen im Hintergrund Ihres a-Tags - hinter dem img-Tag.

Sie sollten wahrscheinlich ein CSS-Sprite erstellen und Hintergrundpositionen verwenden, aber damit sollten Sie beginnen:

<div>
    <a href="home.html"></a>
</div>

div a {
    width:  59px;
    height: 59px;
    display: block;
    background-image: url('images/btnhome.png');
}

div a:hover {
    background-image: url('images/btnhomeh.png);
}

Dieser ein separater Artikel aus dem Jahr 2004 ist immer noch relevant und gibt Ihnen einen Einblick in Sprites und warum es eine gute Idee ist, sie anstelle von zwei verschiedenen Bildern zu verwenden. Es ist viel besser geschrieben als alles, was ich Ihnen erklären könnte.

19
djlumley

Sie setzen den Hintergrund des Bildes auf ein anderes Bild. Was gut ist, aber der Vordergrund (SRC-Attribut des IMG) überlagert immer noch alles andere.

.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
}
.nkhome a {
    background:url(Images/btnhome.png);
    display:block; /* Necessary, since A is not a block element */
    width:59px;
    height:59px;
}
.nkhome a:hover {
    background:url(Images/btnhomeh.png);
}


<div class="nkhome">
    <a href="Home.html"></a>
</div>
7
John Green

Einfach das, kein extra div oder JavaScript benötigt, nur reines CSS ( jsfiddle demo ):

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover">
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>

CSS

.changesImgOnHover {
    display: inline-block; /* or just block */
    width: 50px;
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
    visibility: hidden;
}
7
scrypter

Es funktioniert nicht so, setzen Sie beide Bilder als Hintergrundbilder ein:

.bg-img {
    background:url(images/yourImg.jpg) no-repeat 0 0;
}

.bg-img:hover {
    background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
2
Pal Singh

Hallo, du solltest Elternposition relativ und Kind absolut angeben und Höhe oder Breite der absoluten Klasse so geben 

Css

  .nkhome{
    margin-left:260px;
    width:59px;
    height:59px;
    margin-top:170px;
    position:relative;
    z-index:0;
}
.nkhome a:hover img{
    opacity:0.0;
}
.nkhome a:hover{
  background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    z-index:1;

}

HTML

 <div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a>
    </div>
​

Live-Demo http://jsfiddle.net/t5FEX/7/


oder dieses 

<div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
            onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
            /></a>
    </div>​

Live-Demo http://jsfiddle.net/t5FEX/9/

1
Rohit Azad

Hier sind einige einfach zu befolgende Schritte und ein großartiges On-Hover-Tutorial sind die Beispiele, mit denen Sie "spielen" und live testen können.

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

0
dzoni

Genaue Lösung für Ihr Problem

Sie können das Bild im Hover mit content ändern: url ("YOUR-IMAGE-PATH") ;

Verwenden Sie für die Bildumschaltung die folgende Zeile in Ihrer CSS:

img:hover

und um das Bild im Hover zu ändern, verwenden Sie die folgende Konfiguration in img: hover:

img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
0
Ashish Kwatra