-2
Ich habe eine Registerkarte mit einem Bild darin und ich möchte es so machen, wenn Sie den Mauszeiger über das Bild bewegen, um ein anderes Bild und dann, wenn Sie/unhover es ändert sich zurück zum ursprünglichen Bild.
Wenn Sie schweben/wählen Sie auf der Registerkarte I ändert sich das Bild von Icon20.png erhalten wollen Icon10.png
Hier ist der Code für die Registerkarte istWenn Sie auf eine Registerkarte schweben, ändert sich ein Bild
$('#one').hover(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});
$('#one').click(function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon10.png)'})},
function(){
$('#two').css({'content': 'url(https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png)'})
});div.tab {
\t overflow: hidden;
\t border: 1px solid #336699;
\t background-color: #336699;
\t font-family: "Lato", "Sans-Serif";
}
div.tab button {
\t background-color: #336699;
\t float: left;
\t border: #FFF;
\t outline: none;
\t cursor: pointer;
\t padding: 14px 16px;
\t transition: 0.3s;
\t color: #fff;
\t font-family: "Lato", "Sans-Serif";
\t font-size: 20px;
\t font-style: normal;
\t font-weight: 400;
\t line-height: 22px;
}
div.tab button:hover {
\t background-color: #FFFFFF;
\t color:#336699;
}
div.tab button.active {
\t background-color: #fff;
\t color:#336699;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<button id="one" class="tablinks" aria-label="LDS Vacuum Shopper Links" >
<img src="https://sep.yimg.com/ty/cdn/vacuumshopper/Icon20.png" height="20" width="20" title="LDS Logo" id="two" name="two">
\t \t Vacuum Shopper
\t </button>
</div>UPDATE: Nach der Suche fand ich diese JSFiddle: First JSFiddle und Second JSFiddle und ich haben Elemente aus beiden kombiniert, um die JQuery im Code-Snippet zu erstellen.
Auf SO wird von Ihnen erwartet, dass Sie versuchen, ** den Code selbst zu schreiben **. Nach ** [weitere Recherchen durchführen] (// meta.stackoverflow.com/questions/261592)** Wenn du ein Problem hast, kannst du ** alles posten, was du versucht hast ** mit einer ** klaren Erklärung dessen, was isn ' t funktioniert ** und liefert ein ** [minimales, vollständiges und verifizierbares Beispiel] (// stackoverflow.com/help/mcve)**. – Rob
Dies ist eine uralte Frage, die oft beantwortet wurde. Sie müssen ': Hover' und ein Sprite-Bild verwenden. – hungerstar
Mögliches Duplikat von [Bild bei Hover mit CSS/HTML ändern] (https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) – hungerstar