在鼠標懸停上顯示div元素的文本

我的代碼中有幾個div元素，我需要顯示懸停在頁面角落的每個div元素的文本。我已經向每個div添加了onmouseover並試圖創建腳本。所以，這是我從現在到現在：在鼠標懸停上顯示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標題屬性。

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

或者，如果你想你可以看看的JavaScript了

的createElement（解決這一問題） - 方法

來源

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。這個例子非常感謝你。 –

在鼠標懸停上顯示div元素的文本

回答

相關問題