Как сделать эффект наведения мыши на изображение?

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

Изображение Я хочу изменить сидит в body моей страницы:

<body> 

<!-- Here's myImage!--> 
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">

, и я хотел бы это изображение, например, чтобы перейти на новый образ, anotherImage.jpg при наведении на myImage.jpg. Я попытался найти помощь в другом месте, но не увенчался успехом.

источник

2016-04-02 toadflax

Вы можете использовать javascript's onmouseover событие, но считается лучшим использовать CSS, где это возможно.

Вот дем одно из возможных решений: (Edit on Codepen)

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 400px; 
 
    margin-left: 50px; 
 
} 
 
.container:hover img:nth-of-type(2) { 
 
    opacity: 1; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 600px; 
 
    height: 400px; 
 
    transition: opacity 1s ease-in-out 0s; 
 
} 
 
.container img:nth-of-type(1) { 
 
    opacity: 1; 
 
} 
 
.container img:nth-of-type(2) { 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <img src="https://placeimg.com/600/400/animals" /> 
 
    <img src="https://placeimg.com/600/400/people" /> 
 
</div>

В основном, способ, которым это работает, что два изображения сделаны один и тот же размер с помощью CSS, и помещены на вершине друг друга (для этого и используется абсолютное позиционирование). Когда пользователь не нависает над ним, второе изображение будет иметь непрозрачность 0 (селектор nth-of-type(2) выбирает второй элемент этого типа), поэтому он не виден, а первый имеет непрозрачность 1, поэтому он видимый. Когда пользователь нависает над ним, второму дается непрозрачность 1, поэтому он становится полностью видимым, и поскольку они оба одинакового размера и друг на друга, первый покрывается вторым. Это означает, что изображение меняется, когда вы наводите на него курсор.

Другим преимуществом этого является то, что, как вы можете видеть в демоверсии, он полностью поддается действию! Другие решения, такие как использование display: none или фоновых изображений, не могут использоваться с переходами CSS, поскольку они не являются живыми свойствами, но непрозрачность является анимируемой, поэтому вы можете создавать такие переходы, как это! Удачи!

Если вы не поняли мое объяснение того, как это работает, не стесняйтесь просить разъяснений!

источник

2016-04-03 00:08:31

Это прекрасно работает, спасибо! У меня небольшая проблема, знаете ли вы, почему по какой-то причине, когда я пытаюсь редактировать положение изображений (через прописку, верхнюю, левую и т. Д.), Они не двигаются? В настоящий момент они находятся в верхнем левом углу, но мне нужно их перемещать, но с небольшими проблемами это происходит. – toadflax

Вам нужно переместить весь div.content, чтобы он перемещался, так как перемещал отдельные изображения, прекратив это с рабочей XP. Это работает для вас? ** EDIT: я отредактировал демо выше, чтобы показать вам, как его переместить! ** –

Эта работа отлично, спасибо! Просто быстрый вопрос, возможно ли переместить изображение, которое исчезает ** в **? то есть изображение ** за **, которое вы видите перед тем, как наведите курсор мыши. – toadflax

В вашем CSS в первом классе содержится первое изображение. Тогда вторым классом будет имя класса + hover. EX. .CLASSNAME: парить {}

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

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

источник

2016-04-02 23:46:21 DolbyOver

Хотя это технически работает, это может не всегда быть очень хорошим для семантики ... Фоновые изображения не довольны, они стили, тогда как фактические изображения являются частью фактического содержимого. XP –

Если вы можете добавить оба изображения в <span> тега или около того, вы можете сделать это:

span img:last-child { 
 
    display: none; 
 
} 
 
span:hover img:first-child { 
 
    display: none; 
 
} 
 
span:hover img:last-child { 
 
    display: inline-block; 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
    <img src="http://lorempixel.com/300/150/sports/2"> 
 
</span>

Или использовать псевдо-элемент для второго изображения.

span:hover img { 
 
    display: none; 
 
} 
 
span:hover:after { 
 
    content: url("http://lorempixel.com/300/150/sports/2"); 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
</span>

Смотрите эти jsFiddle для примера некоторых основных замираний в/из эффектов.

источник

2016-04-03 00:01:51 Stickers

+1 для примера псевдоэлемента! Это разумное использование!Хотя это означает, что изображение загружается только при зависании? Возможно, он мог быть реструктурирован, чтобы загрузить изображение с остальной страницы? Это может быть лучше, чтобы люди на более медленных соединениях не должны были страдать от того, что они мешали во время загрузки. Однако идея псевдоэлемента изощренна! xP –

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

Как сделать эффект наведения мыши на изображение?

ответ

Смежные вопросы