Зміна зображення при наведенні за допомогою CSS / HTML

78

У мене така проблема, коли я встановив зображення для відображення іншого зображення, коли миша наводить курсор, однак перше зображення все одно з’являється, а нове не змінює висоту та ширину та перекриває інше. Я все ще досить новачок у HTML / CSS, тому, можливо, я пропустив щось просте. Ось код:

<img src="LibraryTransparent.png" id="Library">

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

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
html  css  image  hover 
— користувач2704743
джерело

Відповіді:

88

Одне з рішень - використовувати також перше зображення як фонове зображення, як це:

<div id="Library"></div>

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

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

Якщо ваше зображення наведення має інший розмір, ви повинні встановити їх так:

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
— Ауреліо Де Роза
джерело
дякую, це також змінить висоту та ширину нового зображення при наведенні?
— user2704743
Якщо ваше зображення при наведенні має інший розмір, вам доведеться їх написати.
— Aurelio De Rosa
Я спробував ваше рішення саме так, як показано, з якоїсь причини, хоча розміри не змінюються, наведення все ж працює
— user2704743
так, я прочитав оновлення, тому змінив тег img на div, а потім скопіював те, що тут є. виправлено наведення, але ні перше зображення, ні зображення наведення не змінюються в розмірах. Я не впевнений, чому?
— user2704743
Ні, я мав на увазі «Якщо над зображення має інший розмір, ви , щоб встановити їх так:" ... частина
— Ауреліо Де Роза
101

Інший варіант - використовувати JS:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
— kurdtpage
джерело
5
І хоча це відроджує старе рішення, вбудовувати стилі в HTML насправді погано. Вся інформація про стиль повинна міститися у верхній частині файлу HTML всередині тегів стилів або посилатися із зовнішньої таблиці стилів.
— the digitalmouse
Чи є спосіб плавного переходу img?
— CliffVandyck
@thedigitalmouse хороший момент, я оновив свою відповідь і видалив CSS
— kurdtpage
@CliffVandyck, ти міг би використовувати анімацію jQuery для цього
— kurdtpage
49

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

Наприклад, уявіть, що зображення має бути сірим Tux, що нам потрібно змінити на кольоровий Tux при наведенні. А елемент "хостинг" - це проліт з ідентифікатором "tuxie".

  1. Я створюю зображення розміром 50 х 25 із двома смоксами, одним кольоровим та іншим сірим,
  2. потім призначте зображення як фон для розмаху 25 x 25,
  3. і нарешті встановіть наведення, щоб просто перемістити фон на 25 пікселів ліворуч.

Мінімальний код:

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

— Алоїз Махдал
джерело
2
+1 за використання "спрайтів", спрайти пришвидшують завантаження сторінок, хорошим онлайн-інструментом, який може допомогти у створенні спрайтів для існуючого веб-сайту, є SpriteMe , дуже корисно створювати спрайти швидше, оскільки це створить для вас нові CSS та зображення.
— jagb
35

Використання 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
Я думаю, що це найкраще рішення. Це простіше, використовує відповідний тег <img>, і не потрібно турбуватися про повторення фону та подібні речі.
— Ломбас,
2
Я виявив, що це залежить від браузера. Працює в Chrome, але не у Firefox чи IE11.
— Чаз
@Chaz перевірити сумісність браузера .
— Вучко
@Vucko, я вважаю, що проблема сумісності стосується використання атрибуту вмісту для чогось, що не є: до або: після. З посилання Сумісність браузера: Властивість CSS вмісту використовується з псевдоелементами :: before та :: after для створення вмісту в елементі. Спробуйте JSFiddle вище у Firefox або IE; вона не працює.
— Чаз
7 

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

  • Це само собою пояснюється.

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

— Даріо Пм
джерело
4

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

Що я роблю, так це те, що я поміщаю вихідне зображення та зображення наведення в 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");
    }
}

Для мене це найпростіший і найефективніший спосіб це зробити.

— Y2H
джерело
3

Ви можете замінити зображення 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");
});
— Нішант Шаан
джерело
Хтось відхилив мою відповідь. поясніть, будь ласка, чому ви не написали мені, щоб я не зрозумів і покращив відповідь.
— Nishanth Shaan
2

Ви не можете використовувати CSS для зміни атрибутів SRC зображення (якщо браузер не підтримує це). Можливо, ви захочете використовувати jQuery з подією наведення.

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);
— Асаф
джерело
1 

.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>
Розгорніть фрагмент

— Рашид
джерело
2
додайте до нього якийсь опис / коментарі, просто розмістивши код, що не допоможе
— piyushj
0

перевірити цю скрипку

Я думаю, що шлях зображення може бути неправильним у вашому випадку

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

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
— Вігнеш Субраманіан
джерело
0

Проблема полягає в тому, що ви встановлюєте перше зображення через атрибут 'src' і при наведенні курсору додаєте до зображення фонове зображення. спробуйте це:

у використанні html: 

<img id="Library">

то в css:

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

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
— Томзан
джерело
Дякую, що мені потрібно змінити, щоб вирішити цю проблему?
— user2704743
ваше рішення працювало з наведенням, але розмір зображень не змінився?
— user2704743
Ви хочете, щоб це змінилося? якщо так, просто додайте до: наведіть клас потрібного розміру.
— Томзан
0

Так, як ви робите щось, цього не станеться. Ви змінюєте фонове зображення, яке блокується оригінальним зображенням. Зміна висоти та ширини також не відбудеться. Щоб змінити атрибут 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;

}

Сподіваюсь, це те, про що ви просите :)

— Даніель Шварц
джерело
привіт Я намагався це рішення, воно виправляє проблему наведення, але не фіксує розміри, які вони залишаються незмінними, що я можу зробити?
— user2704743
Здається, це працює на мене. Чи можемо ми побачити ваш код? Ось мій: jsfiddle.net/kHBzh
— Даніель Шварц
0

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

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

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
— Фі Горан
джерело
0

спробуйте один із них 

<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";
        }
— Адії
джерело
0

Моє рішення 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

З повагою

— iBet7o
джерело
0

Приклад у реальному часі : JSFiddle

Прийнята відповідь має певні проблеми. Там не було змінено розмір зображення. Використовуйте властивість розміру фону для зміни розміру зображення.

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;
}
— Мд. Рафі
джерело
0

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

Атрибут background-size використовується для встановлення висоти та ширини фонового зображення.

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

HTML:

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

... і так далі.

— j3141592653589793238
джерело
-1

Просто використовуйте 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>
— Phong Ly
джерело
1
Для цього потрібен javascript; хіба OP не запитував рішення css / html?
— m02ph3u5
-1

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

<!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>
— Локеш Тхакур
джерело
-1

У мене була подібна проблема.

З моєю кнопкою, визначеною як:

<button  id="myButton" class="myButtonClass"></button>

У мене був такий стиль фону:

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

Коли я переключився на:

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

Наведення курсора на функцію спрацювало чудово.

(не звертаючись до інших атрибутів, таких як розмір і положення зображення або контейнера, змінюється лише фонове зображення)

— вовчий щит
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.