使用 JavaScript 的悬停效果答案

【问题标题】：Hover Effect with JavaScript使用 JavaScript 的悬停效果
【发布时间】：2014-03-03 10:23:13
【问题描述】：

我需要一些关于 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";
}

【问题讨论】：

仅供参考，您可以使用title 属性作为工具提示。
先生，我很困惑。你的意思是this.getAttribute('title')，你能更新一下live fiddle并告诉我怎么做吗？
对不起，我以为是 html.. 但是当我检查小提琴时，我意识到您正在使用 XML。我不确定您是否仍然可以拥有title 属性。
嘿，这里是fiddle。
这很好，但是如果我想在描述框中放一张图片怎么办？？

标签： javascript html css xml dom-events

【解决方案1】：

我已经更新了您的 jsfiddle，现在可以使用了。

基本上，当您创建 'li' 元素时，我会使用 node.name 值向它添加 _name 属性。这样，在 showDescript 事件处理程序中，我只需检索属性并将其放入浮动 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 与我告诉你的有关跨度的内容。

【讨论】：

但是如果我将鼠标光标移到元素之外，它的描述框应该会消失，这不会发生
我知道。如果将光标移向 div 的左边框，它最终会消失。但在右边，li 元素是块，因此默认情况下它们占据容器的整个宽度。如果您想避免这种情况，请将 node.names 放在 span 标记内并将鼠标事件附加到该元素。
你做了什么改变，当我尝试你的代码时它不起作用。
你试过最新版本了吗？ jsfiddle.net/DuKkh/12。它对我有用。你用的是哪个浏览器？
先生，id.innerText = this._name;似乎不起作用

【解决方案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 中生成这些

【讨论】：