CSS: изменить изображение src на img: hover

Мне нужно изменить исходный URL <img> на 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

Любая помощь будет оценена.

Update:

Это работает только для Webkit/Google Chrome.

Ответы

Ответ 1

С помощью только 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');
}

и html be

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Ответ 2

Я изменил несколько изменений, связанных с Патриком Костженсом.

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

Ответ 3

Что вы можете сделать, это немного обмануть, установив 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 размером, который вы хотите, чтобы он был (в два раза меньше вашего фактического изображения).

Fiddle

Ответ 4

У меня была аналогичная проблема, но мое решение состояло в том, чтобы иметь два изображения, один скрытый (display: none) и один видимый. При наведении на окружающий диапазон исходное изображение меняется на отображение: none и другое изображение для отображения: 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>

Ответ 5

У меня есть еще одно решение. Если кто-то использует 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 ^^.

Ответ 6

Fiddle

Согласитесь с ответом 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
    });
 });

Ответ 7

Вот альтернативный подход с использованием чистого 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/

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

Ответ 8

Поскольку вы не можете изменить 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 (short для) для изменения атрибута src.

Стоит отметить, что вам нужна библиотека jQuery, как в скрипте, чтобы сделать эту работу.

Ответ 9

У меня была аналогичная проблема - я хочу заменить картинку на: 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 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, позиционируя не непрозрачность.

Ответ 10

Лично я бы пошел с одним из решений JavaScript/jQuery. Это не только сохраняет вашу семантику HTML (т.е. Изображение отображается как элемент img с обычным src-изображением, определенным в разметке), но если вы используете решение JS/jQuery, то вы также сможете использовать JS/jQuery для предварительной загрузки вашего изображения наведите курсор.

Предварительная загрузка изображения наведения будет означать, что, вероятно, не будет задержки загрузки, когда пользователь нависает над исходным изображением, в результате ваш сайт будет вести себя гораздо более профессионально.

Это означает, что у вас есть зависимость от JS, но крошечное меньшинство, не поддерживающее JS, вероятно, не будет слишком суетиться - и все остальные получат лучший опыт... и ваш код будет хорошим, тоже!

Ответ 11

Вы не можете изменить атрибут img tag 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";
}

Ответ 12

Вы не можете изменить img src с помощью css. Однако вы можете использовать следующее решение 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');});

Ответ 13

Для этого вы можете использовать ниже код

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

}

Ответ 14

В старых браузерах :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>

Ответ 15

Следующий код работает как в 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>

Ответ 16

Это чистое решение 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>

Ответ 17

Лучший способ изменить src для изображения:

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

Смотрите демо-версию: http://www.audenaerde.org/csstricks.html#imagereplacecss

Наслаждайтесь!

Ответ 18

Попробуйте этот код.

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