Hover Effect with JavaScript
Question
I need some help with JavaScript code. 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. 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.
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
2 answers
solution1
0 ACCPTED 2014-03-03 11:03:58
I've updated your jsfiddle and now it works.
Basically, when you create the 'li' element, I add _name property to it with the node.name value. This way, in the showDescrip event handler, I just have to retrieve the property and put it into the floating div. I'm doing it with 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.
Finally, you need to call stopPropagation(), so only the element over wich you are hovering shows the description. 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.
solution2
0 2014-03-03 11:19:36
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.