Question

我的代码中有几个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元素的文本。

非常感谢！

Answer 1

您可以使用HTML标题属性。

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

或者如果你想用JavaScript解决这个问题，你可以查看

createElement（） - 方法

Answer 2

您只需使用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 ，上面的代码为：K-means clustering for mixed numeric and categorical data

Answer 3

每次设置innerHTML时，浏览器都必须解析您设置的内容。只有在设置大量文本时才有意义。如果您不需要插入HTML，则可以使用textContent代替。

要显示化学元素div的数据div，您可以使用document.cloneNode复制化学元素div中的元素并将它们附加到角落：

＆＃13;

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")
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在鼠标悬停时显示div元素的文本

3 个答案: