Question

我目前正在学习javascript，但我似乎无法自己解决这个问题。我只需要朝着正确的方向努力，所以我可以开始弄清楚我需要开始学习什么。我在这里找到了一些指导，但我似乎无法弄清楚如何使用它。

我正在制作周期表。我想要发生的是，当用户将鼠标悬停在元素框上时，div，整个div在页面顶部被复制，只有更大。这是我的网站。

www.boulderdan.com

每个元素框都包含在div中，如下所示，它通过php / mysql获取值。下面是页面呈现时html的样子。

<a href="elementfile.php?action=Oxygen" target="_blank">
<div id="Oxygen" class="element group16 period2">    
<span class="number">8</span><br>    
<span class="symbol">O</span><br>    
<span class="name">Oxygen</span><br>    
<span class="molmass">15.9994</span></div></a>

因此，当用户将鼠标悬停在此div上时，我希望所有这些html都在顶部复制，放在更大的框中。有人建议我使用CSS，但我无法弄清楚我是如何正确地嵌入div的。我也看过jquery，但是，再一次，似乎找不到我需要的东西。请指出我正确的方向！这是一个工作项目，所以我必须自己解决这个问题......我只需知道要进入哪个方向！

谢谢。

Answer 1

var periodicElements = document.querySelectorAll("a");
Array.prototype.map.call(periodicElements, function(element){
  //add two event handlers to all a elements
  //show div
  element.addEventListener("mouseenter", showDivAtTop, false);
  //hide div
  element.addEventListener("mouseleave", clearDivAtTop, false);
})

function showDivAtTop(e)
{
  e.stopPropagation();
  var div = e.target.children[0].cloneNode(true) //clone the div.
  document.body.appendChild(div);
  div.id = "currentElement";
}

function clearDivAtTop(e)
{
  e.stopPropagation();
  //remove the div.
  document.body.removeChild(document.getElementById("currentElement"));
}

#currentElement{
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid red;
  background-color: white;
}

<a href="elementfile.php?action=Oxygen" target="_blank">
<div id="Oxygen" class="element group16 period2">    
<span class="number">8</span><br>    
<span class="symbol">O</span><br>    
<span class="name">Oxygen</span><br>    
<span class="molmass">15.9994</span></div></a>

这就是你想要的东西。

它在做什么：

使用a选择页面中的所有document.querySelectorAll元素。这将返回包含我选择的所有元素的节点列表。
此节点列表的行为有点像数组，因此我可以使用名为map的数组函数来遍历所有元素。如果您想知道这是如何工作的，请阅读：MDN - Array.prototype.map。
我向a元素添加了两个事件处理程序。当鼠标进入a元素时会触发一个，而当它离开时则触发另一个。
当您输入a元素时，我们会停止所有传播。这意味着只有父级才会触发事件，而不是子级。
我们克隆子div并将其放在页面上。
当鼠标离开链接时，它会从页面中删除克隆的div。

在您的元素周期表中，您确实希望将事件侦听器添加到自己的表中，而不是单独添加120个元素。

Answer 2

在父div中使用.innerHTML，其中包含元素。

document.getElementById('bigger-div').innerHTML = document.getElementById('original-div').innerHTML;

还在子元素中使用％来使用宽度和高度大小，因此其中的元素将自动调整为其父元素的大小。

#bigger-div {
    width:300px;
    height:300px;
}

#inside-bigger-div {
    width:100%;
    height:100%;
}

Answer 3

使用jQuery可以显着减少此任务的样板代码。让我们说文档顶部的大元素是id＆＃34; topcontainer＆＃34;：

jQuery(document).on('mouseover','.element',function() {
      var content=jQuery(this).html();
        jQuery('#topcontainer').html(content);
});

查看工作地点：http://jsfiddle.net/amenadiel/e9mbryez/

另外，我不认为你想要在mouseout上清除topcontainer内容，因为当将多个元素悬停在一行时会导致混乱的效果。

使用Javascript Hover在页面上的其他位置复制Div

3 个答案: