Как изменить свойство видимости CSS с помощью DOM при наведении курсора

Question

Я создал элемент <img/> из js , и я хочу, чтобы он появлялся только при наведении мыши
Функция обратного вызова makesVisible() фактически вызывается, но ничего не меняется.

Я хотел бы изменить видимость с hidden на visible

var imgHover = document.createElement('img');
        imgHover.setAttribute("src", "img/icona_play.jpg");
        imgHover.style.width = "30px";
        imgHover.style.height = "23px";
        imgHover.style.position = "absolute";
        imgHover.style.margin = "0 auto";
        imgHover.style.left = "45px";
        imgHover.style.bottom = "35px";
        //I want to change this following property
        imgHover.style.visibility = "hidden";
        imgContainer.appendChild(imgHover);

        //Calling the function when mouseover
        imgContainer.addEventListener("mouseover", makeVisible, false);


        function makeVisible()
        {
            imgHover.style.visibility = "visible";
        }

Answer 1

Вместо этого вы можете использовать свойство непрозрачности. Изначально установите его так: imgHover.style.opacity = 0; Чем в методе makeVisible изменить его на imgHover.style.opacity = 1;

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

Например:

imgContainer.addEventListener("mouseover", makeVisible, false);

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

Answer 2

Ваш код работает должным образом при условии, что вы установили действительную ссылку на imgContainer и что вы указали правильный путь к изображению для динамически создаваемого элемента:

var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');
imgHover.setAttribute("src", "https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png");
imgHover.style.width = "30px";
imgHover.style.height = "23px";
imgHover.style.position = "absolute";
imgHover.style.margin = "0 auto";
imgHover.style.left = "45px";
imgHover.style.bottom = "35px";
imgHover.style.visibility = "hidden";
imgContainer.appendChild(imgHover);

imgContainer.addEventListener("mouseover", makeVisible, false);

function makeVisible(){
  imgHover.style.visibility = "visible";
}

<div id="container">Hover Over Me</div>

Сказав это, следует избегать установки встроенных стилей для элементов, поскольку их трудно переопределить при необходимости, и они часто вызывают дублирование кода.Гораздо проще настроить классы CSS заранее и просто применять / удалять эти классы по мере необходимости с помощью element.classList API.

Кроме того, visibility влияет на то, видите ли вы элемент или нет, но даже если вы его не видите, в пользовательском интерфейсе для него выделяется пространство, что не всегда желательно.В большинстве случаев лучше использовать display:none, чтобы скрыть элемент, а затем просто удалить эту инструкцию, чтобы показать элемент.

Наконец, хотя использование setAttribute(), безусловно, допустимо, вы также можете настроитьэлементы через их прямые свойства.Почти все атрибуты HTML отображаются на соответствующее свойство объекта JavaScript.Их использование может сделать код намного проще.

Взгляните на пример, который собирает все это вместе:

var imgContainer = document.getElementById("container");
var imgHover = document.createElement('img');

// Just set properties of the element directly:
imgHover.src ="https://www.wpclipart.com/signs_symbol/arrows/button_arrows/play_buttons/play_button_gray.png";

// Just add pre-made classes to style the element
imgHover.classList.add("hoverImg");
imgHover.classList.add("hidden");

imgContainer.appendChild(imgHover);
imgContainer.addEventListener("mouseover", makeVisible);
function makeVisible(){
  imgHover.classList.remove("hidden");;
}

.hidden { display:none; } /* Used when an element needs to be hidden */

/* This will be applied via JS */
.hoverImg {
  width:30px;
  height:23px;
  position: absolute;
  margin:0 auto;
  left:45px;
  bottom:35px;
}

<div id="container">Hover Over Me</div>

Answer 3

Here you were appending element like this 
imgContainer.appendChild(imgHover);
So reference for imgHover element in dom will get 
change. Fetch that element once again inside 
makeVisible() function.
document.querySelector("img") // use your appropriate.