Advanced Search

Efecto hover sobre cualquier cosa 1

/ Published in: JavaScript
Save to your folder(s)
utiliza prototype.js --> http://prototype.conio.net
(http://sofanaranja.com/2006/02/17/efecto-hover-sobre-cualquier-cosa-v20/)

La idea es que a todos los elementos que queramos hacerles un hover les asignamos la clase “hover”, y definimos en otra clase “hoverclass” los atributos del estado hover.

A pesar de que en el código se usa una variable llamada ‘div’, funciona con *cualquier* elemento de la página…

Lo que hacemos, igual que con el método anterior, es buscar elementos que contengan la clase ‘hover’, y les asignamos la clase ‘hoverclass’ en el evento ‘onmouseover’.

Más cosillas… Event.observe() es la forma inteligente de asignar una función a un evento sin “manchar” el HTML de la página. En este caso le asigno la función ‘init()’, que se encarga de llamar a ’setHover()’ con los dos parámetros que necesita (el class que he usado para definir qué elementos tienen hover, y el class que quiero usar cuando se hace rollover).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function setHover(className,hoverClassName) {
  2.     var hoverDivs = document.getElementsByClassName(className);
  3.     hoverDivs = $A(hoverDivs);
  4.     hoverDivs.each(
  5.         function(div){
  6.             div.onmouseover = function(){
  7.                 Element.addClassName(this,hoverClassName);
  8.             }
  9.             div.onmouseout = function(){
  10.                 Element.removeClassName(this,hoverClassName);
  11.             }
  12.         }
  13.     );
  14.     }
  15. function init (){
  16.     setHover('hover','hoverclass');
  17. }
  18. Event.observe(window, 'load', init, false);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.