script javascript ne pas afficher/masquer un élément div spécifique

Question

Im apprentissage css, html et javascript pour une semaine ou 5 et je fais un site pour l'école pour un projet.

Mais je me suis cogné contre ce problème:

Dans le html j'ai commandé quelques divs comme ceci:

<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> 

lorsque l'utilisateur passe au-dessus cercle intérieur, la div avec la classe popup01 devrait devenir visible pour eux.

Ainsi, lorsque l'utilisateur passe au-dessus-cercle intérieur ce javascript devrait fonctionner:

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

Dans le fichier css externe le style de popup01 est:

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

Lorsque je tente cela, il est caché mais quand je plane dessus, il reste caché.

J'ai essayé d'utiliser l'attribut display en CSS et en utilisant une instruction if pour l'avoir toujours caché jusqu'à ce que l'utilisateur passe au-dessus de circle-inner.

J'ai cherché sur Internet pour ce problème mais je n'ai pas trouvé quelque chose de similaire.

Si vous avez besoin de plus d'informations, faites le moi savoir :).

Answer 1

En js document.getElementsByClassName retour une collection de nœuds 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 renvoie un tableau.

Vous pouvez utiliser comme cette

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

Answer 3

document.getElementsByClassName retourne un tableau. Donc, vous devriez faire

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

Cela dit, je suggère d'aller avec une solution css pure. Quelque chose comme:

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

Puis-je demander pourquoi avez-vous utilisé la propriété visibility au lieu de display?

Answer 4

Très probablement, votre fonction javascript ne fonctionne et n'a pas un bug. S'il vous plaît, ouvrez dev console dans votre navigateur et laissez-nous savoir quelle erreur vous avez.

En outre, je vous recommande comme une bonne pratique, gardez dev console devant vos yeux pendant que vous vous développez. Il va certainement vous faire gagner du temps et aider à découvrir la racine de n'importe quel problème beaucoup plus rapidement. De toute façon, vous pouvez essayer mes corrections pour la fonction de vol stationnaire. Je pense que cela peut aider.

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

En outre, jetez un oeil sur réagir ou angulaire ou au moins sur jquery.