Изменение изображения при наведении с помощью CSS/HTML - программирование
Подтвердить что ты не робот

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Одним из решений является использование также первого изображения в качестве фонового изображения, например:

<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;
}

Ответ 2

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

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

Ответ 3

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

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

  • Я создаю 50 x 25 изображений с двумя Tuxes, один по цвету и другой серый,
  • затем назначьте изображение в качестве фона для диапазона 25 x 25,
  • и, наконец, установить наведение, чтобы просто переместить фон 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" />

и изображение:

Two-frame Tuxie "film"

Преимущества:

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

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

  • С помощью смарт-селектора Javascript или CSS можно расширить это и включают еще больше кадров в один файл.

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

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

Ответ 4

Используйте 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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

в html:

<img id="Library">

то в css:

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

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

Ответ 11

проверьте fiddle

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

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

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

Ответ 12

В том, как вы делаете вещи, этого не произойдет. Вы меняете фоновое изображение изображения, которое блокируется исходным изображением. Изменение высоты и ширины также не произойдет. Чтобы изменить атрибут src изображения, вам понадобится Javascript или Javascript Library, например 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;

}

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

Ответ 13

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

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

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

Ответ 14

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

<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";
        }

Ответ 15

Мое решение 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 demo

Привет

Ответ 16

Live Пример: 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;
}

Ответ 17

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

Ответ 18

Я бы рекомендовал использовать только 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>

... и т.д.

Ответ 19

Просто используйте 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>

Ответ 20

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

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

Ответ 21

У меня была похожая проблема.

С моей кнопкой, определенной как:

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

Функция наведения мыши работала просто отлично.

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