Wechseln der Bilder während des Mauszeigers

Question

Ich versuche, meinen Code während des Schwebens über bestimmte bereits platzierte Bilder zu verschieben. Kennt jemand die Lösung? Hier ist der Code:

.first-image { 
    float: left; 
} 
.first-image:hover { 
    background-image: url(0-1/0_Hover.png) 
} 
.second-image { 
    float:right; 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
} 

_

<div class="first-image"> 
    <a href="https://bi-na-ri-es.com/black-white"><img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""/></a> 
</div> 

<div class="second-image"> 
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""/> 
</div> 

Answer 1

Dies ist die einfachste Art und Weise Sie mit JQuery tun können:

\t $('.first-image').mouseover(function(){ 
 
\t \t $(this).toggleClass('second-image'); \t 
 
\t }); 
 
\t $('.second-image').mouseover(function(){ 
 
\t \t $(this).toggleClass('first-image'); \t 
 
\t }); 
 
\t

.wrapper { 
 
\t background-color: coral; 
 
\t width:200px; 
 
\t height: 100px; 
 
} 
 

 
.first-image { 
 
    float: left; 
 
} 
 
.first-image:hover { 
 
    background-image: url(0-1/0_Hover.png) 
 
} 
 
.second-image { 
 
    float:right; 
 
} 
 
.second-image:hover { 
 
    bac

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
\t <div class="first-image"> 
 
\t \t \t <a href="https://bi-na-ri-es.com/black-white"> 
 
\t \t \t <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cc/Googlewave.svg/1273px-Googlewave.svg.png" width="100" height="100" \t alt=""/> 
 
\t \t \t </a> 
 
\t </div> 
 

 
\t <div class="second-image"> 
 
\t <a href="https://bi-na-ri-es.com/black-white"> 
 
\t \t \t <img src="https://santatracker.google.com/images/og.png" width="100" height="100" alt=""/> 
 
\t \t </a> 
 
</div> 
 
</div>

Answer 2

können Sie beide Bilder im Markup setzen, verstecken das Sie auf schweben standardmäßig angezeigt werden soll, und wenn Sie das übergeordnete schweben, blenden Sie die sichtbar Bild und zeige das Verborgene.

.first-image { 
 
    float: left; 
 
} 
 
.second-image { 
 
    float:right; 
 
} 
 
.hover, .parent:hover img:not(.hover) { 
 
    display: none; 
 
} 
 
.parent:hover .hover { 
 
    display: inline-block; 
 
} 
 

 
/* you don't need this - just for the demo */ 
 
.hover { 
 
    background: red; 
 
}

<div class="first-image parent"> 
 
    <a href="https://bi-na-ri-es.com/black-white"> 
 
    <img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""> 
 
    <img src="0-1/0-1/0_Hover.png" width="946" height="1066" alt="" class="hover"> 
 
    </a> 
 
</div> 
 

 
<div class="second-image parent"> 
 
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""> 
 
    <img src="0-1/1_Hover.png" width="946" height="1066" alt="" class="hover"> 
 
</div>

Answer 3

Sie dies nicht tun können, weil keine Hover-Bilder in Ihrem divs die Hintergrundbilder bedeckt sind. Sie können transparent Bild in Ihrem div setzen und so etwas wie dies machen:

.second-image { 
    background-image: url(0-1/1_No_Hover.png) 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
} 

<div class="second-image"> 
    <img src="someTransparentImage" width="946" height="1066" alt=""/> 
</div> 

oder Sie können nur Bild entfernen aus dem Innern der div und assing Breite oder Höhe für die div mit dem Hintergrundbild ohne schweben und anderes Bild auf

<div class="second-image">    
</div> 

und die CSS schweben:

.second-image { 
    width: 946px; 
    height: 1066px; 
    background-image: url(0-1/1_No_Hover.png) 
} 
.second-image:hover { 
    background-image: url(0-1/1_Hover.png) 
} 

das gleiche mit erster div

Answer 4

So etwas wie this?

.image { 
    width: 100%; 
    height: 500px; 
    background-image: url(https://cdn.pixabay.com/photo/2014/03/29/09/17/cat-300572_960_720.jpg); 
} 
.image:hover { 
    background-image: url(http://az616578.vo.msecnd.net/files/2016/09/25/636104270517585477-986189690_maxresdefault.jpg); 
} 

Answer 5

müssen Sie JavaScript verwenden Bild Quellen auf schweben zu wechseln.

Allerdings können Sie mit CSS Hintergrund Bilder auf schweben wechseln, wie Sie einrichten, hier zu tun - nur Ihre HTML und CSS ein wenig ändern:

.image { 
 
    width: 946px; 
 
    height: 1066px; 
 
} 
 

 
.first { 
 
    float: left; 
 
    background-image: url(0-1/0_No_Hover.png); 
 
} 
 

 
.first:hover { 
 
    background-image: url(0-1/0_Hover.png); 
 
    /*just for demo*/ 
 
    border: 2px solid red; 
 
} 
 

 
.second { 
 
    float: right; 
 
    background-image: url(0-1/1_No_Hover.png); 
 
} 
 

 
.second:hover { 
 
    background-image: url(0-1/1_Hover.png); 
 
    /*just for demo*/ 
 
    border: 2px solid blue; 
 
}

<a href="https://bi-na-ri-es.com/black-white"> 
 
    <div class="first image"></div> 
 
</a> 
 

 
<div class="second image"></div>

Beachten Sie, dass das Umschließen von <div> in einem Anker-Tag in der Vergangenheit nicht akzeptabel war. In HTML5 ist es jedoch kompatibel. Fügen Sie also am Anfang der Datei <!DOCTYPE html> hinzu.

Answer 6

Nun, ich habe keine Ahnung, warum Sie das tun wollen, aber da ich die Bilder wissen erscheinen basierend auf ihren Quellen und jeder Quelle zeigt ein Bild. Wenn Sie also den Quellcode ändern, wird das Bild trotzdem geändert. Ich denke, wahrscheinlich mit einem Cover-Bild, Z-Index und setzen Sie die Zeit, es funktioniert, aber glaube nicht, wenn es wirklich ein guter Weg ist zu gehen!

.wrapper { 
 
\t width:600px; 
 
\t height: 300px; 
 
} 
 

 
.first-image { 
 
    float: left; 
 
\t \t background-image: url("http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png"); 
 
\t \t background-size: cover; 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 
} 
 
.first-image:hover { 
 
    background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png"); 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 

 
} 
 
.second-image { 
 
    float:right; 
 
\t \t background-image: url("http://1.bp.blogspot.com/-5H9Od8cBl9Y/Te0yRPoVRlI/AAAAAAAAAUQ/nvXOI-MNkAc/s1600/geboorte%252Buit%252Bplaatje.png"); 
 
\t \t width: 300px; 
 
\t \t height: 300px; 
 
} 
 
.second-image:hover { 
 
    float: left; 
 
    background-image: url(http://mindfulness-praktijk.nl/wp-content/uploads/2014/12/krulboom.png); 
 
    background-size: cover; 
 
    width: 300px; 
 
    height: 300px; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
\t \t <div class="first-image"></div> 
 
\t \t <div class="second-image"></div> 
 
</div>