как я могу изменить изображение при наведении курсора мыши?

#html #css #image #hover

#HTML #css — код #изображение #наведите курсор

Вопрос:

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

 .card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

 <div class="card">
  <img src="redlo.jpg" width="100" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

Развернуть фрагмент кода

1. 1. Я рекомендую использовать фоновое изображение, если хотите изменить его с помощью css. 2. С изображением вы можете использовать javascript для достижения того же самого, используя тег img. 3. добавьте два разных класса, т.е. img-top-1, img-top-2, .card .img-top-1 { display : none;} .card img-top-2 { display: встроенный}

Ответ №1:

Я не совсем уверен, правильно ли я понимаю ваш вопрос. На .card:hover втором изображении показано выше первого и закрывает первое, поэтому его больше не видно.

Итак, ваш код работает хорошо, и нет дополнительной необходимости делать первое изображение «исчезающим».

Но если вы (однако) хотите / должны это сделать, просто добавьте в свой css:

 .card:hover img:first-child {
    display: none;
}

Приятное дополнительное замечание: ваш css удваивается. Вам нужно только написать классы .card .card .img-top и .card:hover .img-top один раз 😉

ОБНОВЛЕНИЕ: ВАШ РАБОЧИЙ КОД С ИЗОБРАЖЕНИЯМИ

Здесь вы можете увидеть, насколько корректно работает ваш код. Просто удалил удвоенный css.

 .card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

.card .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: inline;
}

.card {
  width: 130px;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 50px;
}

 <div class="card">
  <img src="https://dummyimage.com/100x100/0000ff/ffffffamp;text=Image one" width="100" height="100" alt="first">
  <img src="https://dummyimage.com/100x100/ff0000/ffffffamp;text=Image two" class="img-top" width="100" height="100" alt="second">
</div>

Развернуть фрагмент

Ответ №2:

Кажется, что высота вашего изображения равна 0

Вы можете попробовать:

 .card:hover .img-top {
  display: block;
}

если не работает, добавьте это в .img-top селектор

 .card .img-top {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

1. Нет. Размер обоих изображений в обоих случаях корректен , задан в html с 100x100px помощью . Код работает правильно. В реальном примере изображения не используются, поэтому вы видите только атрибуты alt … но нет второго изображения , которое закрывало бы первое … таким образом , вы все еще можете видеть атрибут alt с первого изображения :hover .

Ответ №3:

Это должно помочь

 .card {
  width: 130px;
  height: 195px;
  position: relative;
  margin: 50px;
}

.img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.card:hover .img-top {
  display: block;
}
.card:hover .img-top1 { display: none }

 <div class="card">
  <img src="redlo.jpg" width="100" class="img-top1" height="100" alt="first">
  <img src="whitelo.jpg" class="img-top" width="100" height="100" alt="second">
</div>

Развернуть фрагмент

1. Пожалуйста, полностью объясните свой ответ

2. Вы не скрывали свое первое изображение при наведении курсора мыши на элемент карты, и я просто добавил к нему display none. Остальные изменения просто очищаются