使用 Javascript 悬停将 Div 复制到页面上的其他位置

Using Javascript Hover to replicate Div elsewhere on page

本文关键字：其他 位置 悬停 Javascript Div 复制 使用      更新时间：2023-09-26

我目前正在学习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，但同样，似乎找不到我需要的东西。请指出我正确的方向！这是一个工作项目，所以我必须自己弄清楚......我只需要知道该往哪个方向走！

谢谢。 

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>

这能做你想做的事。

它在做什么：

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

在你的元素周期表上，你真的想将事件侦听器添加到表中，而不是单独添加120个元素。

在

包含元素的父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%;
}

使用 jQuery 可以大大减少此任务的样板代码。假设文档顶部的大元素的 id 为 "topcontainer"：

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

查看它的工作位置：http://jsfiddle.net/amenadiel/e9mbryez/

另外，我认为您不想在鼠标退出时清除topcontainer内容，因为在将多个元素悬停在一行中时会导致混乱的影响。

相关文章：