javascript скрипт не отображает/скрывает определенный элемент div

Question

Im обучение css, html и javascript на неделю или 5, и я создаю сайт для школы для проекта.

Но я столкнулся с этой проблемой:

В HTML я заказал некоторые дивы, как это:

<div class="circledef"> 
    <div class="circle"> 
     <div class="circle-inner" onmouseover="hover()"> 
      <img src="images/inSite/pasfoto.png"> 
     </div> 

     <div class="popup01"> 
      test 
     </div> 
    </div> 
</div> 

когда пользователь парит над окружностью-внутренней, то DIV с классом popup01 должен стать видимым им.

Таким образом, когда пользователь парит над внутренним полукругом это Javascript должен работать:

function hover(){ 
    document.getElementsByClassName("popup01").style.visibility = "visible"; 
} 

во внешнем файле CSS стиля для popup01 является:

.popup01 { 
    visibility: hidden; 
    position: absolute; 
    left: -10%; 
    top: -10%; 
    width: 50%; 
    height: 50%; 
    border-radius: 50%; 
    background-color: #FFF; 
} 

Когда я пытаюсь это, скрытый, но когда я наводил на него курсор, он скрыт.

Я попытался использовать атрибут отображения в CSS и использовать оператор if, чтобы он всегда был скрыт до тех пор, пока пользователь не нахлынет на круг.

Я искал в Интернете эту проблему, но не смог найти что-то подобное.

Если вам нужна дополнительная информация, просто дайте мне знать :).

Answer 1

В JS document.getElementsByClassName возвращает коллекцию узлов http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

function hover(){ 
 
    document.getElementsByClassName("popup01")[0].style.visibility = "visible"; 
 
}

.popup01 { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    left: -10%; 
 
    top: -10%; 
 
    width: 50%; 
 
    height: 50%; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
}

<div class="circledef"> 
 
    <div class="circle"> 
 
     <div class="circle-inner" onmouseover="hover()"> 
 
      <img src="images/inSite/pasfoto.png"> 
 
     </div> 
 

 
     <div class="popup01"> 
 
      test 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

document.getElementsByClassName возвращает массив.

Вы можете использовать как этот

document.getElementsByClassName("className")[0].style... 

Answer 3

document.getElementsByClassName возвращает массив. Поэтому вы должны сделать

document.getElementsByClassName("popup01")[0].style.visibility = "visible"; 

Таким образом, я предлагаю пойти с чистым решением css. Что-то вроде:

.circle:hover .popup01 { 
    visibility: visible; 
} 

Могу ли я спросить, почему вы использовали visibility свойство вместо display?

Answer 4

Скорее всего, ваш Javascript функция не работает и есть ошибка. Пожалуйста, откройте dev console в своем браузере и сообщите нам, какая у вас ошибка.

Кроме того, я рекомендую вам как хорошую практику, держите dev console перед глазами, пока вы развиваетесь. Это, безусловно, сэкономит вам время и поможет найти корень любой проблемы гораздо быстрее.

В любом случае, вы можете исправить свои исправления для функции hover. Я думаю, это может помочь.

function hover(){ 
    document.getElementsByClassName("popup01")[0].style.visibility = "visible"; 
} 

Кроме того, взгляните на реактивные или угловые или, по крайней мере, на jquery.