mouseoverでdiv要素のテキストを表示

私のコードにいくつかのdiv要素があり、ページコーナー内のすべてのdiv要素のテキストをホバー上に表示する必要があります。私はonmouseoverをすべてのdivに追加し、スクリプトを作成しようとしました。だから、これは私が今までに到達したものです：mouseoverでdiv要素のテキストを表示

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

毎回innerHTMLを使用してもよいのかどうか分かりません。誰かがいくつかの洞察力を提供できますか？

結果として、thisのようなものを取得したいと考えています。

しかし、ページのコーナーにあるすべてのdiv要素のテキストを表示するだけで済みます。

多くの感謝！

出典

2016-04-09 John Meftali

あなたもCSSを提供できますか？またはプロジェクトをhttps://jsfiddle.netにロードしてください:) – semanser

あなたはinnerHTMLにブラウザを設定するたびに、あなたのようにそれを設定したもの解析する必要があります。大量のテキストを設定している場合にのみ重要です。 HTMLを挿入する必要がない場合は、代わりにtextContentを使用できます。化学元素からのデータのdivを表示するには

を使用すると、化学元素のdiv内の要素のコピーを作成し、コーナーにそれらを追加するdocument.cloneNodeを使用することができdivタグ：

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>

出典

2016-04-09 20:39:01 metarmask

ありがとうございました！私は今それを理解する –

HTML-title属性を使用できます。

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

それとも、あなたが

のcreateElement（）調べることができますJavaScriptでこれを解決したい場合は - 方法

出典

2016-04-09 20:00:31

ありがとうございました！ –

あなたはこのようなだけCSS :hoverセレクタを使用していることを達成することができます：

を

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上記のコードを持つ：https://jsfiddle.net/AndrewL32/be2hqqwx/1/

出典

2016-04-09 20:15:04

残念ながら、JSを使用する必要があります。この例ではありがとうございます。 –

mouseoverでdiv要素のテキストを表示

答えて

関連する問題