HTML - Отображение изображения при наведении

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, у меня есть этот класс div:

 <div id="object1">
    <div class="title" onmouseover="hoverImage(event)">SPT 3</div>
</div>

И за пределами этого div у меня есть другой div с изображением:

 <div class="hover_img" id="hover_img">
    <img src="img/sptgoal.PNG">
</div>

CSS-код для центрирования изображения:

 .hover_img {
    position:relative;
    height: 100%;
    width:100%;
    z-index: 99;
}

.hover_img img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}

Я хочу, чтобы изображение было видно только при наведении курсора мыши на div. Это код Javascript, который у меня есть:

 function hoverImage() {
    var x = document.getElementById("hover_img");
    x.style.display = "block";
}

Но при наведении курсора мыши ничего не отображается. Что я здесь делаю не так?

Ответ №1:

При document.getElementById("hover_img") этом отображается не изображение, а контейнер вокруг него ( hover_img ). Но вы скрыли изображение ( .hover_img img ) в своем CSS.

Используется document.querySelectorAll("#hover_img>img") для выбора вашего изображения. querySelectorAll вернет список узлов, поэтому вы должны использовать x[0] для выбора первого элемента в списке.

 function hoverImage(event) {
  var x = document.querySelectorAll("#hover_img>img");
  var sDisplay = (event.type === "mouseout") ? "none" : "block";
  x[0].style.display = sDisplay;
}

 .hover_img {
    position:relative;
    height: 100%;
    width:100%;
    z-index: 99;
}

.hover_img img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}

 <div id="object1">
    <div class="title" onmouseover="hoverImage(event)" onmouseout="hoverImage(event)">SPT 3</div>
</div>

<div class="hover_img" id="hover_img">
    <img src="https://picsum.photos/200/300">
</div>

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

1. Потрясающе! Но почему изображение не исчезает, когда больше не зависает?

2. Нет события для скрытия изображения. Проверьте мой ответ, я его отредактировал. Теперь в теге div есть событие onmouseout, и в функции hoverImage проверяется, какое событие вызывается

Ответ №2:

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

Blockquote

 function hoverImage() {
    var x = document.getElementById("hover_img");
    x.children[0].style.display = "block";
}

 .hover_img {
    position:relative;
    height: 100%;
    width:100%;
    z-index: 99;
}

.hover_img img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}

 <div id="object1">
    <div class="title" onmouseover="hoverImage(event)">SPT 3</div>
</div>
<div class="hover_img" id="hover_img">
    <img src="img/sptgoal.PNG">
</div>

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

Ответ №3:

вы должны выбрать другой идентификатор для img:

 <div class="hover_img" id="hover_img">
    <img src="img/sptgoal.PNG" id="image1">
</div>

и используйте этот идентификатор в вашем Java-скрипте:

 function hoverImage() {
    var x = document.getElementById("image1");
    x.style.display = "block";
}