开发者

hover to trigger tooltip and menu animation

开发者 https://www.devze.com 2022-12-17 04:24 出处:网络
How do I combine actions on events. So a hover will animate the menu and display the tooltip attached to tha开发者_运维问答t menu item.

How do I combine actions on events. So a hover will animate the menu and display the tooltip attached to tha开发者_运维问答t menu item.

I am currenlty using the lavalamp and beautytips plugins.


You'll need to explore event listeners vs. event handlers. For example:

// Event handlers are declared like this:

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

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

Written this way, each element can have one function for an event.

Event listeners let you attach as many functions as you want for an event. They're different scripts in IE and FF, but do the same thing. Using raw javascript, you could attach events like this:

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

Libraries like JQuery and others have similar ways to do this. A little research and experimentation on this subject should give you more than enough info to animate the menu and display a tooltip simultaneously on the same element.

0

精彩评论

暂无评论...
验证码 换一张
取 消