Изменение изображения при наведении с помощью CSS / HTML

другой вариант-использовать JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

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

например, представьте, что изображение должно быть серым смокингом,который нам нужно изменить на красочный смокинг при наведении. И "хостинг" элемент span с идентификатором "tuxie".

1. Я создаю изображение 50 x 25 с двумя смокингами, один в цвете и другой серый,
2. затем назначьте изображение в качестве фона для диапазона 25 x 25,
3. и, наконец, установите наведение, чтобы просто переместить фон 25px влево.

минимальный код:

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

и образом:

плюсы:

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

• это может быть проще управлять изображениями таким образом, так как "парные" кадры никогда не путаются.

• с умным использованием JavaScript или CSS селектора, можно расширить это и есть даже несколько кадров в один файл.

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

обратите внимание, что это построено с background свойство CSS, поэтому, если вам действительно нужно использовать с <img />s, Вы должны не установить src свойство, так как это перекрывает фон. (Думаю, что грамотное использование прозрачности может привести к интересным результатам, но, вероятно, очень зависит от качества изображение, а также двигателя.).

использовать content:

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

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

что я делаю, так это помещаю исходное изображение и изображение наведения в 1 элемент и сначала скрываю изображение наведения. Затем при наведении я отображаю изображение наведения и скрываю старое, а при наведении я делаю противоположный.

HTML-код:

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript / jQuery:

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

Это для меня самый простой и эффективный способ сделать это.

вы можете заменить изображение HTML IMG без необходимости вносить какие-либо изменения фонового изображения в контейнер div.

это получается с помощью свойства CSS box-sizing: border-box; (это дает вам возможность поставить своего рода эффект наведения на <IMG> очень эффективно.)

для этого применить класс такой образ:

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

пример кода:http://codepen.io/chriscoyier/pen/cJEjs

Оригинал статья: http://css-tricks.com/replace-the-image-in-an-img-with-css/

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

выложить сюда пример кода:

HTML-код:

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery:

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});

вы не можете использовать CSS для изменения атрибутов SRC изображения (если браузер не поддерживает его). Вы можете использовать jQuery с событием наведения.

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);

.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}

<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

чтобы попытаться улучшить хороший ответ этого Рашида, я добавляю некоторые комментарии:

трюк выполняется над оберткой изображения, которое нужно поменять местами (на этот раз тег "a", но, возможно, другой), поэтому класс "hover_image" был помещен туда.

плюсы:

• сохранение url обоих изображений вместе в одном месте помогает, если их нужно изменить.

• Кажется, работает с старые навигаторы тоже (стандарт CSS2).

• это самоочевидно.

• изображение наведения предварительно загружено (без задержки после наведения).

изменить img тег div и дать ему фон в CSS.

проверить это скрипка

Я думаю, что путь изображения может быть неправильным в вашем случае

синтаксис выглядит правильно

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

попробовать один из них

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

или если вы используете изображение в качестве кнопки в форме

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }

мое решение jquery.

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

и html

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

демо: демо JSFiddle

в отношении

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>

проблема в том, что вы устанавливаете первое изображение через атрибут " src " и при наведении на изображение добавляется фоновое изображение. попробуйте это:

в html используйте:

<img id="Library">

затем в css:

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}

в том, как вы делаете вещи, этого не произойдет. Вы меняете фоновое изображение изображения, которое блокируется исходным изображением. Изменение высоты и ширины также не произойдет. Чтобы изменить атрибут src изображения, вам понадобится Javascript или библиотека Javascript, такая как jQuery. Однако вы можете изменить изображение на простое поле div (текстовое) и иметь фоновое изображение, которое изменяется при наведении, даже если само поле div будет пустым. Это место как.

<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

Я надеюсь, это то, что вы просите :)

С каждым ответом, используя опцию фонового изображения, им не хватает одного атрибута. Высота и ширина будут задавать размер контейнера для изображения, но не будут изменять размер самого изображения. background-size необходим для сжатия или растяжения изображения в соответствии с этим контейнером. Я использовал пример из "лучшего ответа"

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

просто используйте Photoshop и создайте два одинаковых изображения: 1-е-как вы хотите, чтобы оно выглядело, 2-е-как вы хотите, чтобы оно выглядело, когда оно зависло. Я заворачиваю изображение в <a> тег, потому что я предполагаю, что это то, что вы хотите. Для этого примера я делаю значок facebook, который является ненасыщенным, но при наведении на него будет отображаться синий цвет facebook.

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

Живой Пример: JSFiddle

принятый ответ имеет некоторые проблемы. Изображение не было изменено. Используйте свойство background-size для изменения размера изображения.

HTML-код:

<div id="image"></div>

CSS:

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}

вот простой трюк. Просто скопируйте и вставьте его.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>       

Я бы рекомендовал использовать только CSS, если это возможно. Мое решение было бы:

HTML-код:

<img id="img" class="" src="" />

CSS:

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

что (не определение src атрибут) также гарантирует, что прозрачные изображения (или изображения с прозрачными частями) отображаются правильно (в противном случае, если второй рисунок будет полупрозрачным, вы также увидите части первого изображения).

В фон-в размере атрибут используется для установки высоты и ширины фонового изображения.

Если (по какой-либо причине) вы не хотите изменять bg-образ изображения, вы также можете поместить изображение в div-контейнер следующим образом:

HTML-код:

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

... и так далее.