Anzeige des Textes von div Element auf mouseover

Ich habe ein paar div Elemente in meinem Code und ich muss den Text jedes div Element auf Hover in der Seitenecke anzeigen. Ich habe onmouseover jedem div hinzugefügt und versucht, ein Skript zu machen. Also, das ist, was ich da jetzt erreicht:Anzeige des Textes von div Element auf mouseover

<!DOCTYPE html> 
<head> 
<title> Periodic Table </title> 

<script type="text/javascript"> 

function showMore(){ 
document.getElementsByClassName("number").innerHTML = /* div txt here */ 
document.getElementsByClassName("electroneg").innerHTML = /* div txt here */ 
document.getElementsByClassName("couch").innerHTML = /* div txt here */ 
document.getElementsByClassName("symbol").innerHTML = /* div txt here */ 
document.getElementsByClassName("name").innerHTML = /* div txt here */ 
document.getElementsByClassName("massatom").innerHTML = /* div txt here */ 
} 
</script> 

</head> 

<body> 
<div onmouseover="showMore()" class="elementChim left"> 
     <div class="number">1</div> 
     <div class="electroneg">2,1</div> 
     <div class="couch"> 
      <div>1</div> 
     </div> 
     <div class="symbol gaz">H</div> 
     <div class="name">Hydrogen</div> 
     <div class="massatom">1,0088</div> 
    </div> 

    <div onmouseover="showMore()" class="elementChim right"> 
     <div class="number">2</div> 
     <div class="symbol gaz">He</div> 
     <div class="name">Helium</div> 
     <div class="masseatom">4,002</div> 
     <div class="electroneg"></div> 
     <div class="couch"> 
      <div>2</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Ich bin nicht sicher, ob es in Ordnung ist innerHTML- jedes Mal zu verwenden. Kann mir jemand Einblicke geben?

Ich möchte etwas wie this als Ergebnis erhalten.

Aber ich muss nur den Text jedes div-Elements in der Seitenecke anzeigen.

Vielen Dank!

Quelle

2016-04-09 John Meftali

können Sie auch css bereitstellen? oder laden Sie Ihr Projekt bitte auf https://jsfiddle.net :) – semanser

Jedes Mal, stellen Sie innerHTML der Browser zu analysieren, was Sie legen Sie es als. Das ist nur wichtig, wenn Sie große Mengen an Text einstellen. Wenn Sie HTML nicht einfügen müssen, können Sie stattdessen textContent verwenden.

Um die divs von Daten aus dem chemischen Element divs zeigen Sie document.cloneNode, um eine Kopie der Elemente innerhalb des chemischen Elements divs und an der Ecke hängen Sie verwenden:

var corner; 
 
function showMore() { 
 
    // Empty corner 
 
    corner.innerHTML = ""; 
 
    // Go through the children of the moused over element 
 
    for (var i = 0; i < this.children.length; i++) { 
 
    // Clone and append them to the corner 
 
    corner.appendChild(this.children[i].cloneNode(true)); 
 
    } 
 
} 
 

 
// When elements can be accessed 
 
document.addEventListener("DOMContentLoaded", function() { 
 
    // Select chemical element elements 
 
    var chemicalElementDivs = document.getElementsByClassName("elementChim"); 
 
    for (var i = 0; i < chemicalElementDivs.length; i++) { 
 
    // Add listeners to them 
 
    chemicalElementDivs[i].addEventListener("mouseover", showMore); 
 
    } 
 
    corner = document.getElementById("corner") 
 
});

.elementChim { 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#corner { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background: white; 
 
}

<div class="elementChim left"> 
 
    <div class="number">1</div> 
 
    <div class="electroneg">2,1</div> 
 
    <div class="couch"> 
 
    <div>1</div> 
 
    </div> 
 
    <div class="symbol gaz">H</div> 
 
    <div class="name">Hydrogen</div> 
 
    <div class="massatom">1,0088</div> 
 
</div> 
 

 
<div class="elementChim right"> 
 
    <div class="number">2</div> 
 
    <div class="symbol gaz">He</div> 
 
    <div class="name">Helium</div> 
 
    <div class="masseatom">4,002</div> 
 
    <div class="electroneg"></div> 
 
    <div class="couch"> 
 
    <div>2</div> 
 
    </div> 
 
</div> 
 
<div id="corner"></div>

Quelle

2016-04-09 20:39:01 metarmask

Vielen Dank! Ich verstehe es jetzt –

Sie können den HTML-Titel Attribut verwenden.

<div title="Your mouseover-Text here"></div>

Oder wenn Sie wollen, dass diese mit lösen JavaScript Sie die

create nachschlagen kann() - Methode

Quelle

2016-04-09 20:00:31

Vielen Dank! –

Sie können erreichen, dass nur die CSS-:hover Selektor wie folgt aus:

HTML:

<div class="number"> 
    <span>1</span> 
</div> 

<div class="electroneg"> 
    <span>2,1</span> 
</div>

CSS:

.number span {opacity:0;} 
.number:hover span {opacity:1;} 

.electroneg span {opacity:0;} 
.electroneg:hover span {opacity:1;}

jsFiddle mit über Codes: https://jsfiddle.net/AndrewL32/be2hqqwx/1/

Quelle

2016-04-09 20:15:04

Leider muss ich JS verwenden. Vielen Dank für dieses Beispiel. –

Anzeige des Textes von div Element auf mouseover

Antwort

Verwandte Themen