Javascript Skript zeigt nicht/verstecken ein bestimmtes div Element

Question

Ich lerne CSS, HTML und Javascript für eine Woche oder 5 und ich mache eine Website für die Schule für ein Projekt.

Aber ich stieß gegen dieses Problem:

Im html ich einige divs wie folgt bestellt:

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

, wenn der Benutzer über Kreis-Innen schwebt, die div mit der Klasse popup01 sollte sichtbar werden zu ihnen.

Also, wenn der Benutzer inneren Kreis schwebt über dieses Javascript laufen soll:

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

In der externen CSS-Datei der Stil für popup01 ist:

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

Als ich dies versuchen, es ist versteckt, aber wenn ich darüber schwebe, bleibt es verborgen.

Ich habe versucht, das Anzeigeattribut in CSS zu verwenden und eine if-Anweisung zu verwenden, um es immer ausgeblendet zu lassen, bis der Benutzer über dem Kreis-inneren schwebt.

Ich habe das Internet nach diesem Problem gesucht, konnte aber etwas ähnliches nicht finden.

Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen :).

Answer 1

In js document.getElementsByClassName eine Sammlung von Knoten zurückgeben 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 gibt ein Array zurück.

können Sie mögen dieses

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

Answer 3

verwenden document.getElementsByClassName ein Array zurückgibt. Also sollten Sie tun

Das sagte, würde ich vorschlagen, mit einer reinen CSS-Lösung gehen. Etwas wie:

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

Darf ich fragen, warum Sie visibility Eigenschaft statt display verwendet haben?

Answer 4

Höchstwahrscheinlich Ihre JavaScript-Funktion nicht und hat einen Fehler funktioniert. Bitte öffnen Sie in Ihrem Browser dev console und teilen Sie uns mit, welchen Fehler Sie haben.

Darüber hinaus würde ich Sie als eine gute Praxis empfehlen, halten Sie dev console vor Ihren Augen, während Sie entwickeln. Es wird auf jeden Fall Zeit sparen und helfen, Wurzel eines Problems viel schneller zu entdecken.

In irgendeiner Weise können Sie meine Korrekturen für Hover-Funktion versuchen. Ich denke, es kann helfen.

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

Darüber hinaus schauen Sie auf reagieren oder angular oder zumindest auf jquery.