CSS: Зміна зображення src на img: навести курсор

Мені потрібно змінити <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');
}

І якщо ви думаєте, що можете використовувати якийсь код JavaScript, то ви повинні мати можливість змінити 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);" />

Я змінив кілька змін, пов’язаних із Патріком Костеньсом.

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

У мене була подібна проблема, але моє рішення полягало в тому, щоб було два зображення, одне приховане (дисплей: жодне) та одне видиме. Після наведення курсору на навколишній проміжок початкове зображення змінюється на відображення: жодне та інше зображення для відображення: блокувати. (Можливо використовувати "вбудований" замість цього, залежно від ваших обставин)

У цьому прикладі замість зображень використовуються два проміжні теги, щоб ви могли бачити результат, запускаючи їх тут. На жаль, у мене не було жодних джерел онлайн-зображень, якими можна було б користуватися.

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

Що ви можете зробити, це трохи обдурити, встановивши widthта height0, щоб приховати фактичне зображення та застосувати деякі 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тег розміром, який ви хочете, щоб він мав (наполовину менше вашого фактичного зображення).

Скрипка

Ось альтернативний підхід із використанням чистого CSS. Ідея полягає в тому, щоб включити обидва зображення в розмітку HTML і відобразити їх або приховати відповідно:

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/

Зверніть увагу, що використовувані зображення мають однакові розміри для правильного відображення. Крім того, ці розміри файлів зображень досить малі, тому завантаження декількох не є проблемою в цьому випадку, але можливо, якщо ви хочете переключити зображення великих розмірів зображень.

Щодо семантики, то мені не подобається жодне рішення, дане досі. Тому я особисто використовую таке рішення:

.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 зображення, розташувавшись не через непрозорість.

Оскільки ви не можете змінити srcCSS: Якщо 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 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;
}

Et voilà!