Question

我需要一些JavaScript代码的帮助。我试图从XML数据中获取节点名称，我很成功，但现在我正在尝试创建一个小div，这将创建描述框，它将显示该元素的名称，当我将鼠标悬停在该元素上时我的意思是，当我将鼠标悬停在 book 上时，描述框将显示 book ，如果我将鼠标悬停在 price 上，说明框将显示价。如果鼠标光标移到该元素之外，则描述标签将消失，我附加了实时小提琴。所有这些都需要用JavaScript来完成，而不是JQUERY。

Live Fiddle

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

谢谢

Answer 1

我已更新您的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...

已编辑新jsfiddle以及我向您介绍的跨度。

Answer 2

我不确定它是否可以像你那样做

<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悬停效果

2 个答案: