CSS: Thay đổi hình ảnh src trên img: hover

Tôi cần bật <img>URL nguồn hover.

Tôi đã thử điều này nhưng không hiệu quả:

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

Bất kỳ trợ giúp sẽ được đánh giá cao.

Cập nhật:

Điều này chỉ hoạt động cho Webkit / Google Chrome.

Chỉ với html và css, không thể thay đổi src của hình ảnh. Nếu bạn thay thế thẻ img bằng thẻ div, thì bạn có thể thay đổi hình ảnh được đặt làm nền như sau

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

Và nếu bạn nghĩ rằng bạn có thể sử dụng một số mã javascript thì bạn sẽ có thể thay đổi src của thẻ img như bên dưới

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

Tôi đã sửa đổi một số thay đổi liên quan đến 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>

BẢN GIỚI THIỆU

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

Tôi gặp sự cố tương tự nhưng giải pháp của tôi là có hai hình ảnh, một hình ảnh bị ẩn (hiển thị: không có) và một hình ảnh hiển thị. Khi di chuột qua một khoảng xung quanh, hình ảnh ban đầu sẽ thay đổi thành display: none và hình ảnh khác để hiển thị: khối. (Có thể sử dụng 'nội tuyến' thay thế tùy thuộc vào hoàn cảnh của bạn)

Ví dụ này sử dụng hai thẻ span thay vì hình ảnh để bạn có thể xem kết quả khi chạy nó ở đây. Thật không may, tôi không có bất kỳ nguồn hình ảnh trực tuyến nào để sử dụng.

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

Những gì bạn có thể làm là ăn gian một chút bằng cách đặt widthvà heightthành 0 để ẩn hình ảnh thực tế và áp dụng một số CSS để làm những gì bạn muốn:

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

Và phần đệm làm cho imgthẻ có kích thước bạn muốn (bằng một nửa kích thước của hình ảnh thực tế của bạn).

Vĩ cầm

Đây là một cách tiếp cận thay thế bằng cách sử dụng CSS thuần túy. Ý tưởng là bao gồm cả hình ảnh trong đánh dấu HTML và hiển thị hoặc ẩn những hình ảnh này tương ứng trên: 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/

Lưu ý rằng các hình ảnh được sử dụng có cùng kích thước để hiển thị phù hợp. Ngoài ra, kích thước tệp hình ảnh này khá nhỏ nên việc tải nhiều tệp không phải là vấn đề trong trường hợp này nhưng có thể xảy ra nếu bạn đang muốn chuyển đổi hiển thị hình ảnh có kích thước lớn.

Về ngữ nghĩa, tôi không thích bất kỳ giải pháp nào được đưa ra cho đến nay. Do đó, cá nhân tôi sử dụng giải pháp sau:

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

Đây là một giải pháp CSS duy nhất có khả năng tương thích tốt với trình duyệt. Nó sử dụng một trình bao bọc hình ảnh có nền ban đầu được ẩn bởi chính hình ảnh. Khi di chuột, hình ảnh bị ẩn qua độ mờ, do đó hình nền sẽ hiển thị. Bằng cách này, người ta không có một trình bao bọc rỗng mà là một hình ảnh thực trong mã đánh dấu.

Tôi có một giải pháp nữa. Nếu ai đó sử dụng 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';
}

Không có CSS ​​^^.

Tôi đã gặp sự cố tương tự - Tôi muốn thay thế ảnh trên: di chuột nhưng không thể sử dụng BACKGRUND-IMAGE do thiếu thiết kế thích ứng của Bootstrap.

Nếu bạn thích tôi chỉ muốn thay đổi hình ảnh trên: di chuột (nhưng không đòi thay đổi SRC cho thẻ hình ảnh nhất định), bạn có thể làm điều gì đó như thế này - đó là giải pháp chỉ 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; }

Nếu bạn muốn mã tương thích với IE7, bạn có thể ẩn / hiện: HOVER hình ảnh bằng cách định vị chứ không phải bằng độ mờ.

Vì bạn không thể thay đổi srcbằng CSS: Nếu jQuery là một tùy chọn cho bạn, hãy kiểm tra câu hỏi này.

Bản giới thiệu

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

Về cơ bản, nó sử dụng .hover()phương pháp ... cần hai chức năng để làm cho nó hoạt động. Khi bạn vào di chuột và khi bạn thoát ra.

Chúng tôi đang sử dụng .attr(viết tắt của thuộc tính) để thay đổi srcthuộc tính.

Cần lưu ý rằng bạn cần có thư viện jQuery như trong fiddle để làm cho việc này hoạt động.

Vĩ cầm

Đồng ý với câu trả lời của AshisKumar,
có một cách để thay đổi url hình ảnh khi di chuột qua bằng cách sử dụng chức năng jQuery như bên dưới:

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

Cá nhân tôi sẽ sử dụng một trong các giải pháp JavaScript / jQuery. Điều này không chỉ giữ cho ngữ nghĩa HTML của bạn (tức là một hình ảnh được hiển thị dưới dạng phần tử img với hình ảnh src thông thường được xác định trong đánh dấu), mà nếu bạn sử dụng giải pháp JS / jQuery thì bạn cũng sẽ có thể sử dụng JS / jQuery để tải trước hình ảnh di chuột của bạn.

Tải trước hình ảnh di chuột sẽ có nghĩa là không có độ trễ khi tải xuống khi người dùng di chuột qua hình ảnh gốc, dẫn đến trang web của bạn hoạt động chuyên nghiệp hơn nhiều.

Điều đó có nghĩa là bạn phụ thuộc vào JS, nhưng một số nhỏ không bật JS có thể sẽ không quá bận tâm - và những người khác sẽ có được trải nghiệm tốt hơn ... và mã của bạn cũng sẽ tốt!

Bạn không thể thay đổi thuộc tính imgcủa thẻ srcbằng cách sử dụng CSS. Có thể sử dụng trình xử lý sự kiện 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";
}

Bạn không thể thay đổi img src bằng css. Tuy nhiên, bạn có thể sử dụng giải pháp css tinh khiết sau đây. 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');
}

Hoặc, nếu bạn không muốn sử dụng div với hình nền, bạn có thể sử dụng giải pháp 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');});

Đối với điều này, bạn có thể sử dụng mã dưới đây

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

}

Trên các trình duyệt cũ hơn, :hoverchỉ hoạt động trên <a>các phần tử. Vì vậy, bạn phải làm một cái gì đó như thế này để nó hoạt động.

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

Đoạn mã sau hoạt động trên cả Chrome và 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>

Đây là một giải pháp CSS thuần túy. Đặt hình ảnh hiển thị trong thẻ img, đặt hình ảnh thứ hai làm nền trong css, sau đó ẩn hình ảnh khi di chuột.

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

Cách tốt nhất để thay đổi srchình ảnh là:

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

Xem bản trình diễn trực tiếp: http://www.audenaerde.org/csstricks.html#imagereplacecss

Thưởng thức!

Hãy thử mã này.

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

Có một cách đơn giản khác chỉ sử dụng HTML và CSS!

Chỉ cần bọc <img>thẻ của bạn bằng div như sau:

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

Sau đó, trong tệp CSS của bạn, hãy ẩn img và đặt hình nền cho phần tử gói 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;
}

Et voilà!