CSS: Ubah gambar src pada img: hover

Saya perlu mengubah <img>URL sumber di hover.

Saya telah mencoba ini tetapi tidak berhasil:

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

Bantuan apa pun akan dihargai.

Memperbarui:

Ini hanya berfungsi untuk Webkit / Google Chrome.

Dengan hanya html dan css, tidak memungkinkan untuk mengubah src gambar. Jika Anda mengganti tag img dengan tag div, maka Anda mungkin bisa mengubah gambar yang disetel sebagai latar belakang seperti

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

Dan jika Anda berpikir Anda bisa menggunakan beberapa kode javascript maka Anda harus bisa mengubah src dari tag img seperti di bawah ini

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);" />

Saya telah mengubah beberapa perubahan yang terkait dengan Patrick Kostjens.

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

DEMO

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

Saya memiliki masalah serupa tetapi solusi saya adalah memiliki dua gambar, satu tersembunyi (tampilan: tidak ada) dan satu terlihat. Saat mengarahkan kursor ke rentang sekitar, gambar asli berubah menjadi display: none dan gambar lain menjadi display: block. (Mungkin menggunakan 'inline' tergantung pada keadaan Anda)

Contoh ini menggunakan dua tag span alih-alih gambar sehingga Anda dapat melihat hasilnya saat menjalankannya di sini. Sayangnya, saya tidak memiliki sumber gambar online untuk digunakan.

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

Yang dapat Anda lakukan adalah menipu sedikit dengan menyetel widthdan heightke 0 untuk menyembunyikan gambar sebenarnya dan menerapkan beberapa CSS untuk melakukan apa yang Anda inginkan:

#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');
}

Dan bantalan membuat imgtag dengan ukuran yang Anda inginkan (setengah ukuran gambar Anda yang sebenarnya).

Biola

Berikut adalah pendekatan alternatif menggunakan CSS murni. Idenya adalah untuk menyertakan kedua gambar dalam markup HTML dan menampilkan atau menyembunyikannya sesuai dengan itu pada: 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/

Perhatikan bahwa gambar yang digunakan memiliki dimensi yang sama untuk tampilan yang sesuai. Selain itu, ukuran file gambar ini cukup kecil sehingga memuat beberapa tidak menjadi masalah dalam kasus ini tetapi mungkin jika Anda ingin beralih tampilan gambar berukuran besar.

Mengenai semantik, saya tidak suka solusi yang diberikan sejauh ini. Oleh karena itu, saya pribadi menggunakan solusi berikut:

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

Ini adalah solusi khusus CSS dengan kompatibilitas browser yang baik. Itu menggunakan pembungkus gambar yang memiliki latar belakang yang awalnya disembunyikan oleh gambar itu sendiri. Saat hover, gambar disembunyikan melalui opacity, sehingga gambar latar menjadi terlihat. Dengan cara ini, seseorang tidak memiliki pembungkus kosong tetapi gambar asli dalam kode markup.

Saya punya satu solusi lagi. Jika ada yang menggunakan 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';
}

Tanpa CSS ^^.

Saya mengalami masalah yang sama - saya ingin mengganti gambar di: hover tetapi tidak dapat menggunakan BACKGRUND-IMAGE karena kurangnya desain adaptif Bootstrap.

Jika Anda menyukai saya hanya ingin mengubah gambar di: hover (tetapi tidak bersikeras mengubah SRC untuk tag gambar tertentu) Anda dapat melakukan sesuatu seperti ini - ini adalah solusi khusus 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; }

Jika Anda menginginkan kode yang kompatibel dengan IE7, Anda dapat menyembunyikan / menampilkan: gambar HOVER dengan memposisikan bukan berdasarkan opasitas.

Karena Anda tidak dapat mengubah srcdengan CSS: Jika jQuery adalah pilihan untuk Anda, periksa biola ini.

Demo

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

Ini pada dasarnya menggunakan .hover()metode ... dibutuhkan dua fungsi untuk membuatnya bekerja. Saat Anda memasukkan kursor dan saat Anda keluar.

Kami menggunakan .attr(kependekan dari atribut) untuk mengubah srcatribut.

Perlu dicatat bahwa Anda memerlukan pustaka jQuery yang disertakan seperti di biola untuk membuat ini berfungsi.

Biola

Setuju dengan jawaban AshisKumar,
ada cara untuk mengubah url gambar di mouse dengan menggunakan fungsi jQuery seperti di bawah ini:

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

Secara pribadi, saya akan menggunakan salah satu solusi JavaScript / jQuery. Ini tidak hanya menjaga semantik HTML Anda (yaitu, gambar ditampilkan sebagai elemen img dengan gambar src biasanya ditentukan dalam markup), tetapi jika Anda menggunakan solusi JS / jQuery maka Anda juga akan dapat menggunakan JS / jQuery untuk memuat gambar hover Anda.

Pramuat gambar hover berarti kemungkinan tidak ada penundaan download saat pengguna mengarahkan kursor ke gambar asli, sehingga situs Anda berperilaku jauh lebih profesional.

Ini berarti Anda memiliki ketergantungan pada JS, tetapi minoritas kecil yang tidak mengaktifkan JS mungkin tidak akan terlalu sibuk - dan semua orang akan mendapatkan pengalaman yang lebih baik ... dan kode Anda juga akan bagus!

Anda tidak dapat mengubah atribut imgtag srcmenggunakan CSS. Mungkin menggunakan event handler Javascript onmouseover() .

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

Anda tidak dapat mengubah img src menggunakan css. Anda dapat menggunakan solusi css murni berikut. 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');
}

Atau, jika Anda tidak ingin menggunakan div dengan gambar latar belakang, Anda dapat menggunakan solusi 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');});

Untuk ini, Anda dapat menggunakan kode di bawah ini

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');

}

Di browser lama, :hoverhanya bekerja pada <a>elemen. Jadi Anda harus melakukan sesuatu seperti ini untuk membuatnya bekerja.

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

Kode berikut berfungsi di Chrome dan 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>

Inilah solusi CSS murni. Letakkan gambar yang terlihat di tag img, letakkan gambar kedua sebagai latar belakang di css, lalu sembunyikan gambar di hover.

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

Cara terbaik untuk mengubah srcgambar adalah:

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

Lihat demo langsung: http://www.audenaerde.org/csstricks.html#imagereplacecss

Nikmati!

Coba Kode Ini.

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

Ada cara sederhana lain hanya dengan menggunakan HTML dan CSS!

Cukup bungkus <img>tag Anda dengan div seperti ini:

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

Kemudian, di file CSS Anda sembunyikan img dan atur gambar latar belakang untuk elemen div pembungkus:

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

Et voila!