JavaScript悬停效果

Question

I need some help with JavaScript code. 我需要JavaScript代码方面的帮助。 I am trying to get node name from XML data, which i am successful to do so, but now i am trying to create a small div which will create so the description box which will show me the name of that element, when i hover over that element. 我正在尝试从XML数据中获取节点名称，我这样做是成功的，但是现在我试图创建一个小的div ，它将创建一个描述框，当我将鼠标悬停在上面时，该描述框将向我显示该元素的名称。该元素。 I mean that when i hover on book , the description box will show book , if i hover over price , description box will show price . 我的意思是，当我将鼠标悬停在书上时 ，描述框将显示书，如果我将鼠标悬停在价格上 ，则描述框将显示价格。 if the mouse cursor go outside that element, then the description tag will vanish, I am attaching the live fiddle. 如果鼠标光标移到该元素的外面，则描述标签将消失，我将附加实时小提琴。 All these things needs to be done with JavaScript, not JQUERY. 所有这些事情都需要使用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";
}

Thank you 谢谢

Answer 1

I've updated your jsfiddle and now it works. 我已经更新了您的jsfiddle ，现在可以使用了。

Basically, when you create the 'li' element, I add _name property to it with the node.name value. 基本上，当您创建'li'元素时，我将使用node.name值向其添加_name属性。 This way, in the showDescrip event handler, I just have to retrieve the property and put it into the floating div. 这样，在showDescrip事件处理程序中，我只需要检索属性并将其放入浮动div中。 I'm doing it with innerText. 我正在用innerText做到这一点。 If you'd want to show a more beautiful floating div, with images and so on, you'll have to replace the .innerText = 'desc' with something else, perhaps putting a 'span' element inside the div and placing the description inside it. 如果要显示带有图像等的更漂亮的浮动div，则必须用其他内容替换.innerText ='desc'，也许在div内放置一个'span'元素并放置说明在里面。

Finally, you need to call stopPropagation(), so only the element over wich you are hovering shows the description. 最后，您需要调用stopPropagation（），因此只有您所徘徊的元素才会显示说明。 If you don't do this, you'll only see the description of the root node. 如果您不这样做，则只会看到根节点的描述。

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...

EDITED New jsfiddle with what I told you about spans. 编辑了新的jsfiddle，其中包含我对span的介绍。

Answer 2

i am not sure its like that you can do it like that 我不确定它是否可以那样做

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

you can generete those from javascript 您可以从javascript生成那些

JavaScript悬停效果

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-03-03 11:03:58

解决方案2
0 2014-03-03 11:19:36

JavaScript悬停效果

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-03-03 11:03:58

解决方案2 0 2014-03-03 11:19:36

解决方案1
0 已采纳 2014-03-03 11:03:58

解决方案2
0 2014-03-03 11:19:36