JavaScript скрыть еще один элемент при наведении мыши

Question

Итак, у меня есть этот JavaScript, над которым я работаю, и я хочу показать / скрыть другой элемент HTML при наведении курсора, но он не будет работать. Вот HTML:

<div class='post' onmouseover="document.getElementsByClassName('another_element').style.display='inline';" onmouseout="document.getElementsByClassName('another_element').style.display='none';">

Answer 1

Попробуйте это:

<div class='post' onmouseover="document.getElementsByClassName('another_element')[0].style.display='inline';" onmouseout="document.getElementsByClassName('another_element')[0].style.display='none';">

Это не работает, потому что getElementsByClassName () извлекает массив элементов, которые содержат another класс. Вы просто должны выбрать, какой элемент вы хотите.

Если элемент только один, вы можете присвоить ему определенный идентификатор, например:

<div id="another_element"></div>

<div class='post' onmouseover="document.getElementById('another_element').style.display='inline';" onmouseout="document.getElementById('another_element').style.display='none';">

Answer 2

Я только что подумал и нашел простое решение.Спасибо всем вам, ребята, за ваш вклад.Вот что я придумал.Я могу установить уникальный идентификатор для каждого элемента, который я собираюсь показать / скрыть, и использовать getElementById для каждого элемента вместо использования getElementsByClassName и необходимости проходить через массив.В итоге получается так:

onmouseover="document.getElementById('an_element').style.display='inline'; document.getElementById('another_element').style.display='inline';"
onmouseout="document.getElementById('an_element').style.display='none'; document.getElementById('another_element').style.display='none';"

Answer 3

getElementsByClassName возвращает NodeList, а не Node. NodeList не имеет свойства стиля. Вы можете использовать только первый элемент в списке или выбрать вместо него по идентификатору:

<div class='post' onmouseover="document.getElementsByClassName('another_element')[0].style.display='inline';" onmouseout="document.getElementsByClassName('another_element')[0].style.display='none';">

<div class='post' onmouseover="document.getElementsById('another_element').style.display='inline';" onmouseout="document.getElementsById('another_element').style.display='none';">

Очевидно, что во втором примере вам нужно присвоить элементу идентификатор ...

Answer 4

getElementsByClassName возвращает массив.Попробуйте перебрать их.