CSS: Verander afbeelding SRC op IMG: Hover

.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}
.img-wrapper > img {
  vertical-align: top;
}
.img-wrapper > img:hover {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

Antwoord 7, Autoriteit 4%

Ik heb nog een oplossing. Als iemand Angularjs gebruikt:
http://jsfiddle.net/ec9gn/30/

<div ng-controller='ctrl'>
    <img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='https://dummyimage.com/100x100/{{img}}/fff' />
</div>

Het JavaScript:

function ctrl($scope){
    $scope.img= '000';
}

Geen CSS ^^.

Antwoord 8, Autoriteit 2%

Ik had een soortgelijk probleem – ik wil de afbeelding vervangen door: Hover maar kan geen backgrund-image gebruiken vanwege het ontbreken van het adaptieve ontwerp van Bootstrap.

Als je mij leuk vindt, wil je de afbeelding alleen wijzigen op :hover (maar niet aandringen op het wijzigen van SRC voor de bepaalde afbeeldingstag), dan kun je zoiets doen – het is een CSS-only oplossing.

HTML:

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS:

li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }

Als u IE7-compatibele code wilt, kunt u de :HOVER-afbeelding verbergen/tonen door deze te positioneren en niet door dekking.

Antwoord 9, autoriteit 2%

Fiddle

Akkoord met het antwoord van AshisKumar,
er is een manier om de afbeeldings-url te wijzigen door met de muis over de jQuery-functionaliteit te gaan, zoals hieronder:

$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });

Antwoord 10, autoriteit 2%

Aangezien je de srcniet kunt wijzigen met CSS: als jQuery een optie voor je is, vink dan deze viool aan.

Demo

$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)

Het gebruikt in feite de .hover()methode… er zijn twee functies nodig om het te laten werken. Wanneer u de hover ingaat en wanneer u deze verlaat.

We gebruiken de .attr(afkorting van attribuut) om het srcattribuut te wijzigen.

Het is de moeite waard om op te merken dat je de jQuery-bibliotheek nodig hebt, zoals in de viool, om dit te laten werken.

Antwoord 11

Persoonlijk zou ik kiezen voor een van de JavaScript / jQuery-oplossingen. Dit houdt niet alleen uw HTML-semantisch (dwz een afbeelding wordt weergegeven als een img-element met zijn gebruikelijke src-afbeelding gedefinieerd in de opmaak), maar als u een JS / jQuery-oplossing gebruikt, kunt u ook de JS / jQuery om uw zweefafbeelding vooraf te laden.

Als u de afbeelding met de muisaanwijzer vooraf laadt, is er waarschijnlijk geen downloadvertraging wanneer de gebruiker de muisaanwijzer op de originele afbeelding plaatst, waardoor uw site zich veel professioneler gaat gedragen.

Het betekent wel dat je afhankelijk bent van JS, maar de kleine minderheid die geen JS heeft ingeschakeld, zal zich waarschijnlijk niet al te druk maken – en alle anderen zullen een betere ervaring krijgen… en je code zal goed zijn , ook!

Antwoord 12

Je kunt het src-kenmerk van de src-tag niet wijzigen met CSS. Mogelijk met behulp van Javascriptonmouseover()gebeurtenishandler.

HTML:

<img id="my-img" src="https://dummyimage.com/100x100/000/fff" onmouseover='hover()'/>

JavaScript:

function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}

Antwoord 13

U kunt de IMG SRC niet wijzigen met CSS. U kunt de volgende pure CSS-oplossing echter gebruiken.
HTML:

<div id="asks"></div>

CSS:

#asks {
  width: 100px;
  height: 100px;
  background-image: url('https://dummyimage.com/100x100/0000/fff');
}
#asks:hover {
  background-image: url('https://dummyimage.com/100x100/eb00eb/fff');
}

Of, als u geen div wilt gebruiken met een achtergrondafbeelding, kunt u een JavaScript / JQuery-oplossing gebruiken.
HTML:

<img id="asks" src="https://dummyimage.com/100x100/000/fff" />

jQuery:

$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});

Antwoord 14

Hiervoor kunt u onderstaande code gebruiken

1) HTML

<div id = "aks">
</div>

2) CSS

#aks
    {
        width:100px;
height:100px;    
        background-image:url('https://dummyimage.com/100x100/000/fff');}
#aks:hover {
    background-image:url('https://dummyimage.com/100x100/eb00eb/fff');
}

Antwoord 15

In oudere browsers werkte :hoveralleen voor <a>-elementen. Je zou dus iets zoals ditmoeten doen om het te laten werken.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}
a#aks:link
{
  background-image: url('https://dummyimage.com/100x100/000/fff');
}
a#aks:hover
{
  background-image: url('https://dummyimage.com/100x100/eb00eb/fff');
}
</style>
<a href="#" id="aks"></a>

Antwoord 16

De volgende code werkt in zowel Chrome als Firefox

<a href="#"><img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/></a>

Antwoord 17

Probeer deze code.

  .card {
            width: 200px;
            height: 195px;
            position: relative;
            display: inline-block;
        }
        .card .img-top {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
width:200px;
        }
        .card:hover .img-top {
            display: inline;
        }

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Image Change on Hover with CSS</title>
    </head>
    <body>
        <div class="card">
            <img src="https://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front">
        </div>
    </body>
    </html>

.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           
<div class='buttons'>
<ul>
<li class='but1'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Blog</p></a></li>
<li class='but2'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /> <p>Herrero</p></a></li>
<li class='but3'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Loftin</p></a></li>
<li class='but4'><a href='#'><img src='scalesb.jpg' height='300' width='300' alt='' /><p>Contact</p></a></li>
</ul>
</div>

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

<div class="image-wrapper">
    <img src="https://dummyimage.com/100x100/000/fff">
</div>

.image-wrapper:hover {
    background-image: url(https://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}
.image-wrapper:hover img {
    display: none;
}