CSS: เปลี่ยน image src บน img: hover

ฉันจำเป็นต้องเปลี่ยน<img>URL hoverของแหล่งข้อมูลเกี่ยวกับ

ฉันได้ลองแล้ว แต่ใช้ไม่ได้:

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

ความช่วยเหลือใด ๆ จะได้รับการชื่นชม

ปรับปรุง:

ใช้งานได้กับ Webkit / Google Chrome เท่านั้น

ด้วย html และ css เท่านั้นจึงไม่สามารถเปลี่ยน src ของรูปภาพได้ หากคุณแทนที่แท็ก img ด้วยแท็ก div คุณอาจสามารถเปลี่ยนภาพที่ตั้งเป็นพื้นหลังได้ตามต้องการ

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

และถ้าคุณคิดว่าคุณสามารถใช้โค้ดจาวาสคริปต์ได้คุณควรจะสามารถเปลี่ยน src ของแท็ก img ได้ตามด้านล่าง

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

ฉันได้แก้ไขการเปลี่ยนแปลงเล็กน้อยที่เกี่ยวข้องกับ 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>

การสาธิต

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

ฉันมีปัญหาที่คล้ายกัน แต่วิธีแก้ปัญหาของฉันคือมีสองภาพหนึ่งภาพซ่อนอยู่ (แสดง: ไม่มี) และอีกภาพหนึ่งที่มองเห็น เมื่อวางเมาส์เหนือช่วงโดยรอบรูปภาพต้นฉบับจะเปลี่ยนเป็นการแสดง: ไม่มีและรูปภาพอื่นที่จะแสดง: บล็อก (อาจใช้ 'inline' แทนขึ้นอยู่กับสถานการณ์ของคุณ)

ตัวอย่างนี้ใช้แท็กช่วงสองแท็กแทนรูปภาพเพื่อให้คุณสามารถเห็นผลลัพธ์เมื่อเรียกใช้ที่นี่ น่าเสียดายที่ฉันไม่มีแหล่งที่มาของรูปภาพออนไลน์ให้ใช้

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

นี่คือแนวทางอื่นโดยใช้ CSS บริสุทธิ์ แนวคิดคือการรวมทั้งภาพในมาร์กอัป HTML และให้แสดงหรือซ่อนตาม: 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/

โปรดทราบว่าภาพที่ใช้มีขนาดเท่ากันเพื่อให้แสดงผลได้อย่างเหมาะสม นอกจากนี้ขนาดไฟล์รูปภาพเหล่านี้ยังค่อนข้างเล็กดังนั้นการโหลดหลาย ๆ ไฟล์จึงไม่ใช่ปัญหาในกรณีนี้ แต่อาจเป็นไปได้ว่าคุณต้องการสลับการแสดงภาพขนาดใหญ่

สิ่งที่คุณทำได้คือโกงเล็กน้อยโดยการตั้งค่าwidthและheightเป็น 0 เพื่อซ่อนรูปภาพจริงและใช้ CSS เพื่อทำสิ่งที่คุณต้องการ:

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

และช่องว่างภายในทำให้imgแท็กมีขนาดที่คุณต้องการ (ขนาดครึ่งหนึ่งของรูปภาพจริงของคุณ)

ซอ

เกี่ยวกับความหมายฉันไม่ชอบวิธีแก้ปัญหาใด ๆ ที่ให้มา ดังนั้นฉันจึงใช้วิธีแก้ปัญหาต่อไปนี้เป็นการส่วนตัว:

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

นี่เป็นโซลูชันเฉพาะ CSS ที่เข้ากันได้กับเบราว์เซอร์ที่ดี ใช้ประโยชน์จากกระดาษห่อรูปภาพที่มีพื้นหลังซึ่งในตอนแรกถูกซ่อนไว้โดยรูปภาพเอง เมื่อวางเมาส์เหนือภาพจะถูกซ่อนผ่านความทึบดังนั้นภาพพื้นหลังจึงมองเห็นได้ วิธีนี้ไม่มีกระดาษห่อหุ้มที่ว่างเปล่า แต่เป็นภาพจริงในรหัสมาร์กอัป

ฉันมีทางออกอีกทางหนึ่ง หากใครใช้ 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';
}

ไม่มี CSS ^^.

ฉันมีปัญหาที่คล้ายกัน - ฉันต้องการแทนที่รูปภาพบน: วางเมาส์เหนือ แต่ไม่สามารถใช้ BACKGRUND-IMAGE ได้เนื่องจากไม่มีการออกแบบที่ปรับเปลี่ยนได้ของ Bootstrap

หากคุณชอบฉันเพียงต้องการเปลี่ยนรูปภาพบน: โฮเวอร์ (แต่ไม่ยืนยันการเปลี่ยนแปลง SRC สำหรับแท็กรูปภาพบางรายการ) คุณสามารถทำสิ่งนี้ได้ - เป็นโซลูชัน 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; }

หากคุณต้องการรหัสที่เข้ากันได้กับ IE7 คุณสามารถซ่อน / แสดง: HOVER ภาพโดยการวางตำแหน่งไม่ใช่ด้วยความทึบ

เนื่องจากคุณไม่สามารถเปลี่ยนsrcด้วย CSS: หาก jQuery เป็นตัวเลือกสำหรับคุณให้ตรวจสอบซอนี้

การสาธิต

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

โดยพื้นฐานแล้วใช้.hover()วิธีการ ... ใช้สองฟังก์ชั่นในการทำงาน เมื่อคุณเข้าสู่โฮเวอร์และเมื่อคุณออกจาก

เรากำลังใช้.attr(ย่อมาจากแอตทริบิวต์) เพื่อเปลี่ยนsrcแอตทริบิวต์

ควรทราบว่าคุณต้องมีไลบรารี jQuery ที่รวมอยู่ในซอเพื่อให้ทำงานนี้ได้

ซอ

เห็นด้วยกับคำตอบของ AshisKumar
มีวิธีเปลี่ยน URL ของภาพเมื่อวางเมาส์โดยใช้ฟังก์ชัน jQuery ดังต่อไปนี้:

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

โดยส่วนตัวฉันจะใช้หนึ่งในโซลูชัน JavaScript / jQuery สิ่งนี้ไม่เพียง แต่รักษาความหมาย HTML ของคุณ (กล่าวคือรูปภาพจะแสดงเป็นองค์ประกอบ img พร้อมกับเป็นภาพ src ปกติที่กำหนดไว้ในมาร์กอัป) แต่ถ้าคุณใช้โซลูชัน JS / jQuery คุณจะสามารถใช้ JS / jQuery เพื่อโหลดภาพโฮเวอร์ของคุณไว้ล่วงหน้า

การโหลดภาพโฮเวอร์ไว้ล่วงหน้าจะหมายความว่าไม่มีความล่าช้าในการดาวน์โหลดเมื่อผู้ใช้วางเมาส์เหนือรูปภาพต้นฉบับส่งผลให้ไซต์ของคุณทำงานได้อย่างมืออาชีพมากขึ้น

หมายความว่าคุณมีการพึ่งพา JS แต่คนกลุ่มน้อยที่ไม่ได้เปิดใช้งาน JS อาจจะไม่งอแงมากเกินไป - และคนอื่น ๆ จะได้รับประสบการณ์ที่ดีขึ้น ... และโค้ดของคุณก็จะดีเช่นกัน!

คุณไม่สามารถเปลี่ยนimgแท็กแอตทริบิวต์ใช้src CSSเป็นไปได้โดยใช้ตัวจัดการเหตุการณ์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";
}

คุณไม่สามารถเปลี่ยน img src โดยใช้ css คุณสามารถใช้โซลูชัน 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');
}

หรือถ้าคุณไม่ต้องการใช้ div กับภาพพื้นหลังคุณสามารถใช้โซลูชัน 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');});

สำหรับสิ่งนี้คุณสามารถใช้รหัสด้านล่าง

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

}

บนเบราว์เซอร์รุ่นเก่า:hoverใช้ได้เฉพาะกับ<a>องค์ประกอบเท่านั้น คุณต้องทำอะไรแบบนี้เพื่อให้มันใช้งานได้

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

รหัสต่อไปนี้ใช้ได้กับทั้ง Chrome และ 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>

นี่คือโซลูชัน CSS ที่บริสุทธิ์ ใส่รูปภาพที่มองเห็นได้ในแท็ก img วางรูปภาพที่สองเป็นพื้นหลังใน css จากนั้นซ่อนรูปภาพไว้ที่โฮเวอร์

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

วิธีที่ดีที่สุดในการเปลี่ยนsrcรูปภาพคือ:

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

ดูการสาธิตสด: http://www.audenaerde.org/csstricks.html#imagereplacecss

สนุก!

ลองใช้รหัสนี้

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

มีอีกวิธีง่ายๆโดยใช้ HTML และ CSS เท่านั้น!

เพียงแค่ปิด<img>แท็กของคุณด้วย div ดังนี้:

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

จากนั้นในไฟล์ CSS ของคุณซ่อน img และตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ 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;
}

เอทโวล่า!