JavaScript懸停效果
[英]Hover Effect with JavaScript
問題描述
我需要JavaScript代碼方面的幫助。 我正在嘗試從XML數據中獲取節點名稱，我這樣做是成功的，但是現在我試圖創建一個小的div ，它將創建一個描述框，當我將鼠標懸停在上面時，該描述框將向我顯示該元素的名稱。該元素。 我的意思是，當我將鼠標懸停在書上時 ，描述框將顯示書 ，如果我將鼠標懸停在價格上 ，則描述框將顯示價格 。 如果鼠標光標移到該元素的外面，則描述標簽將消失，我將附加實時小提琴。 所有這些事情都需要使用JavaScript而非JQUERY完成。
book
title
author
year
price
function moveDescrip(event)
{
var d = document.getElementsByClassName("Desc")[0];
var x=event.clientX;
var y=event.clientY;
d.style.top = (y + 10) + "px";
d.style.left = (x + 10) + "px";
}
function showDescrip()
{
var d = document.getElementsByClassName("Desc")[0];
d.style.visibility="visible";
}
function hideDescrip()
{
var d = document.getElementsByClassName("Desc")[0];
d.style.visibility="hidden";
}
謝謝
2 個解決方案
解決方案1
0 已采納 2014-03-03 11:03:58
我已經更新了您的jsfiddle ，現在可以使用了。
基本上，當您創建'li'元素時，我將使用node.name值向其添加_name屬性。 這樣，在showDescrip事件處理程序中，我只需要檢索屬性並將其放入浮動div中。 我正在用innerText做到這一點。 如果要顯示帶有圖像等的更漂亮的浮動div，則必須用其他內容替換.innerText ='desc'，也許在div內放置一個'span'元素並放置說明在里面。
最后，您需要調用stopPropagation（），因此只有您所徘徊的元素才會顯示說明。 如果您不這樣做，則只會看到根節點的描述。
function showDescrip(e)
{
if (!e) e = window.event;
var d = document.getElementsByClassName("Desc")[0];
var descSpan = document.getElementById('float-description');
var text = document.createTextNode(this._name);
descSpan.removeChild(descSpan.firstChild);
descSpan.appendChild(text);
d.style.visibility="visible";
e.stopPropagation();
}
...
function traverse(node) {
var ul = document.createElement('ul');
if (typeof node !== 'undefined') {
var li = document.createElement('li');
li._name = node.name;
var desc = document.createTextNode(node.name);
//more code...
解決方案2
0 2014-03-03 11:19:36
我不確定它是否可以那樣做
<body>
<div id="mydiv">
<p id="p1" title="" onclick="myfunction()">p one</p>
<p id="p2" title="">p two</p>
</div>
<script type="text/javascript">
function myfunction() {
var first = "my first p";
var second = "my second p";
document.getElementById("p1").title = first;
document.getElementById("p2").title = second;
}
您可以從javascript生成那些
表懸停效果 JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.