CSS: zmień źródło obrazu na img: hover

Muszę zmienić <img>źródłowy adres URL na hover.

Próbowałem tego, ale nie zadziała:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

Każda pomoc będzie mile widziana.

Aktualizacja:

Działa to tylko w przypadku Webkit / Google Chrome.

Mając tylko html i css, nie można zmienić źródła obrazu. Jeśli zastąpisz tag img znacznikiem div, możesz zmienić obraz ustawiony jako tło na

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

A jeśli myślisz, że możesz użyć jakiegoś kodu javascript, powinieneś być w stanie zmienić src tagu img, jak poniżej

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Zmodyfikowałem kilka zmian związanych z Patrickiem Kostjensem.

<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

PRÓBNY

http://jsfiddle.net/ssuryar/wcmHu/429/

Miałem podobny problem, ale moim rozwiązaniem były dwa obrazy, jeden ukryty (wyświetlacz: brak) i jeden widoczny. Po najechaniu kursorem na otaczający zakres, oryginalny obraz zmienia się na wyświetlany: brak, a drugi obraz do wyświetlenia: blok. (Zamiast tego można użyć słowa „inline”, w zależności od okoliczności)

Ten przykład używa dwóch tagów span zamiast obrazów, więc możesz zobaczyć wynik po uruchomieniu go tutaj. Nie miałem niestety żadnych źródeł obrazu online.

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

Co możesz zrobić, to trochę oszukać, ustawiając widthi heightna 0, aby ukryć rzeczywisty obraz i zastosować CSS, aby zrobić to, co chcesz:

#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

I wypełnienie sprawiające, że imgtag ma rozmiar, który chcesz mieć (połowa rozmiaru rzeczywistego obrazu).

Skrzypce

Oto alternatywne podejście wykorzystujące czysty CSS. Chodzi o to, aby uwzględnić oba obrazy w znacznikach HTML i odpowiednio je wyświetlić lub ukryć: hover

HTML

<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle: https://jsfiddle.net/m4v1onyL/

Zwróć uwagę, że użyte obrazy mają takie same wymiary, aby były prawidłowo wyświetlane. Ponadto te rozmiary plików obrazów są dość małe, więc ładowanie wielu obrazów nie stanowi w tym przypadku problemu, ale może tak być, jeśli chcesz przełączać wyświetlanie obrazów o dużych rozmiarach.

Jeśli chodzi o semantykę, nie podoba mi się żadne podane dotychczas rozwiązanie. Dlatego osobiście korzystam z następującego rozwiązania:

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

To jest jedyne rozwiązanie CSS z dobrą kompatybilnością przeglądarki. Wykorzystuje opakowanie obrazu, którego tło jest początkowo ukryte przez sam obraz. Po najechaniu kursorem obraz jest ukryty przez krycie, dlatego obraz tła staje się widoczny. W ten sposób nie ma się pustego opakowania, ale prawdziwy obraz w kodzie znaczników.

Mam jeszcze jedno rozwiązanie. Jeśli ktoś używa AngularJs: http://jsfiddle.net/ec9gn/30/

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

Javascript:

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

Brak CSS ^^.

Miałem podobny problem - chcę zamienić obraz na: najedź, ale nie mogę użyć BACKGRUND-IMAGE z powodu braku adaptacyjnego projektu Bootstrapa.

Jeśli lubisz mnie, chcesz tylko zmienić obraz: najedź (ale nie nalegaj na zmianę SRC dla określonego tagu obrazu), możesz zrobić coś takiego - to tylko rozwiązanie CSS.

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

Jeśli chcesz kod zgodny z IE7, możesz ukryć / pokazać: HOVER obraz przez pozycjonowanie nie przez krycie.

Ponieważ nie możesz zmienić src pomocą CSS: Jeśli jQuery jest dla ciebie opcją, sprawdź to skrzypce.

Próbny

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

Zasadniczo używa .hover() metody ... wymaga dwóch funkcji, aby działała. Kiedy wchodzisz do zawisu i kiedy go opuszczasz.

Używamy .attr(skrót od atrybutu), aby zmienićsrc atrybutu.

Warto zauważyć, że aby to działało, potrzebujesz biblioteki jQuery dołączonej jak na skrzypcach.

Skrzypce

Zgadzam się z odpowiedzią AshisKumar,
istnieje sposób na zmianę adresu URL obrazu po najechaniu myszą za pomocą funkcji jQuery, jak poniżej:

$(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
    });
 });

Osobiście wybrałbym jedno z rozwiązań JavaScript / jQuery. Nie tylko zachowuje to semantyczny HTML (tj. Obraz jest wyświetlany jako element img ze zwykłym obrazem src zdefiniowanym w znaczniku), ale jeśli używasz rozwiązania JS / jQuery, będziesz mógł również użyć JS / jQuery do wstępnego załadowania obraz w dymku.

Wstępne załadowanie obrazu po najechaniu oznacza, że ​​prawdopodobnie nie będzie opóźnienia w pobieraniu, gdy użytkownik najedzie na oryginalny obraz, co spowoduje, że Twoja witryna będzie zachowywać się znacznie bardziej profesjonalnie.

Oznacza to, że jesteś zależny od JS, ale niewielka mniejszość, która nie ma włączonego JS, prawdopodobnie nie będzie zbytnio zbulwersowana - a wszyscy inni będą mieli lepsze wrażenia ... a twój kod też będzie dobry!

Nie możesz zmienić atrybutu imgtagu za srcpomocą CSS. Możliwe przy użyciu modułu onmouseover() obsługi zdarzeń Javascript .

HTML:

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

JavaScript:

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

Nie możesz zmienić img src za pomocą css. Możesz jednak użyć następującego czystego rozwiązania CSS. HTML:

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

CSS:

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

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Lub, jeśli nie chcesz używać elementu div z obrazem tła, możesz użyć rozwiązania javascript / jQuery. HTML:

<img id="asks" src="http://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');});

W tym celu możesz użyć poniższego kodu

1) html

<div id = "aks">

</div>

2) css

#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}

Na starszych przeglądarkach :hoverdziałało tylko na <a>elementach. Więc musiałbyś zrobić coś takiego, żeby to zadziałało.

<style>
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a href="#" id="aks"></a>

Poniższy kod działa zarówno w przeglądarce Chrome, jak i 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>

Oto czyste rozwiązanie CSS. Umieść widoczny obraz w tagu img, umieść drugi obraz jako tło w css, a następnie ukryj obraz po najechaniu kursorem.

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

Najlepszym sposobem zmiany srcobrazu jest:

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

Zobacz demo na żywo: http://www.audenaerde.org/csstricks.html#imagereplacecss

Cieszyć się!

Wypróbuj ten kod.

   .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="http://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>

Jest jeszcze jeden prosty sposób korzystania tylko z HTML i CSS!

Po prostu zawiń swój <img>tag w div w następujący sposób:

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

Następnie w pliku CSS ukryj obraz i ustaw obraz tła dla zawijającego elementu div:

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

.image-wrapper:hover img {
    display: none;
}

Zrobione!