悬停以触发工具提示和菜单动画

时间:2010-01-24 15:18:36

标签: hover tooltip lavalamp

如何组合对事件的操作。因此,悬停将为菜单设置动画并显示附加到该菜单项的工具提示。

我目前正在使用lavalamp和beautytips插件。

1 个答案:

答案 0 :(得分:1)

您需要探索事件侦听器与事件处理程序。例如:

// Event handlers are declared like this:

var elm = document.getElementById("someElement");

elm.onmouseover = function() { 
  elm.innerHTML = "OVER state has been triggered!";
}

以这种方式编写,每个元素都可以有一个事件函数。

事件侦听器允许您为事件附加任意数量的函数。它们在IE和FF中是不同的脚本,但做同样的事情。使用原始javascript,您可以附加如下事件:

function listenFor(obj,eventName,fcnRef,bubbling) {
  if(!bubbling) { bubbling= false; }
  if(!obj.addEventListener) { obj.attachEvent("on"+eventName,fcnRef); }
  else { obj.addEventListener(eventName,fcnRef,otherthing); }
};

function handler1() {
  this.style.border = '2px solid red';
}

function handler2() {
  this.style.background = 'green';
}

listenFor(elm,"over",handler1);
listenFor(elm,"over",handler2);

像JQuery和其他类似的库有类似的方法来做到这一点。关于这个主题的一些研究和实验应该为您提供足够的信息来动画菜单并在同一元素上同时显示工具提示。