Я хочу задать вопрос, пожалуйста (если мне нравится img-код)

<img src"img1.png" id="img1" />

И у меня есть еще один img

<img src="img1.png" id="img2" />

Как: при наведении курсора мыши скрыть img1 и показать img2 на месте

#img2{display:none;} /*to hide img2*/
#img1:hover{display:none;} /*to hide when hover*/
#img2:hover{display:block;} /*to show the img 2 */

Этот код не работает: я хочу заменить img1 при наведении указателя мыши на img2

1
Mahmoud Adel Mansour 27 Дек 2015 в 20:17

3 ответа

Лучший ответ

См. Эту скрипку

Вам следует немного изменить свой CSS следующим образом

#img2 {
  display: none;
}

#img1:hover{
  display: none;
}

#img1:hover~#img2 {
  display: block;
}

Для этого вы можете использовать селектор ~.

0
Lal 27 Дек 2015 в 17:38

Попробуй это.

#img1, #img2 {
  position: absolute;
  transition: 0.5s;
}

#img2:hover {
  opacity: 0;
  transition: 0.5s;
}
<img src="http://www.fillmurray.com/400/400" alt="Smiley face" id="img1" width="42" height="42">
<img src="http://www.fillmurray.com/200/200" alt="Smiley face" id="img2" width="42" height="42">
0
Guille 27 Дек 2015 в 18:21

Вот еще один более интересный пример, о котором вы просили:

<div class="reveal">
<img src="http://c.wrzuta.pl/wi16455/94df8de30009b2384fe15089" 
width=280px height=280px>
<img class="img2"   src="http://static.gamespot.com/uploads/
original/1123/11234696/2517081-0135811689-yamah.jpg"
width=280px  height=280px>
<div class="activator" ></div>
</div>

http://codepen.io/damianocel/pen/GopoJB

0
damiano celent 27 Дек 2015 в 17:40