使用Javascript懸停來複制其他頁面

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，我希望所有的這個網站在頂部複製，在一個較大的盒子。有人建議我使用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>

這是你想要的東西。

它在幹什麼：

1. 它使用document.querySelectorAll選擇頁面中所有a元素。這將返回包含我選擇的所有元素的節點列表。
2. 這個節點列表的行爲有點像一個數組，所以我可以使用一個名爲map的數組函數遍歷所有的元素。如果你想知道這是如何工作的閱讀：MDN - Array.prototype.map。
3. 我將兩個事件處理程序添加到a元素。當鼠標進入a元素時，其他人將觸發。
4. 當您輸入a元素時，我們停止所有傳播。這意味着只有父母纔會開火，而不是孩子。
5. 我們克隆子div並將其放在頁面上。
6. 當鼠標離開鏈接時，它從頁面中刪除克隆的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「topcontainer」：

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

在看到它的工作：http://jsfiddle.net/amenadiel/e9mbryez/

另外，我不認爲你想在清空topcontainer內容mouseout，因爲當將多個元素懸停在一行中時，會導致混亂的效果。