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.