CSS: изменить 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');
}

И если вы думаете, что можете использовать какой-нибудь код 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/

У меня была аналогичная проблема, но мое решение заключалось в том, чтобы иметь два изображения, одно скрытое (отображение: нет) и одно видимое. При наведении курсора на окружающий диапазон исходное изображение изменяется на display: none, а другое изображение для display: block. (Вместо этого можно использовать inline в зависимости от ваших обстоятельств)

В этом примере вместо изображений используются два тега span, поэтому вы можете увидеть результат, запустив его здесь. К сожалению, у меня не было никаких онлайн-источников изображений.

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

У меня была аналогичная проблема - я хочу заменить изображение на: hover, но не могу использовать BACKGRUND-IMAGE из-за отсутствия адаптивного дизайна Bootstrap.

Если вы, как я, хотите изменить изображение только на: hover (но не настаиваете на изменении 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;
}

И вуаля!