在鼠标悬停上显示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元素的文本

回答

相关问题