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

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

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

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

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

1. Я создаю 50 х 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" />

и образом:

плюсы:

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

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

• с умным использованием 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;

}

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

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

<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 и создайте два одинаковых изображения, первое из которых-как вы хотите, чтобы оно выглядело, второе-как вы хотите, чтобы оно выглядело, когда оно зависло. Я обертываю изображение в <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>

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