Llamar a JavaScript desde la función de CSS

Question

¿Hay alguna manera de que pueda llamar a mi función de JavaScript desde css?

Por ej aquí es el estilo:

.first-nav li a:hover, 
.first-nav li.hover a { 
    margin:-3px 0 -1px; 
    height:30px; 
    position:relative; 
    background:url(../images/nav-hover.jpg) no-repeat; 
} 

y quiero llamar a una función JS en vuelo estacionario ancla.

Answer 1

No, no se puede activar JavaScript directamente desde CSS.

Lo que puede hacer es usar selectores de CSS para encontrar los elementos que desea ver de esta manera, y luego observar los eventos del mouse. Los eventos estándar son mouseover y mouseout, pero pueden ser un poco difíciles de trabajar porque burbujean (se obtiene mouseout, por ejemplo, cada vez que el mouse deja algún elemento descendiente). Sin embargo, con la lógica adecuada, no es malo trabajar con ellos, y de hecho, si tiene muchos de estos, es probable que desee utilizar mouseover y mouseout en lugar de la alternativa siguiente porque puede configurarlos solo en un contenedor principal y luego averigüe qué elemento descendiente está involucrado, que puede ser más simple en algunos casos (y más complicado en otros).

IE proporciona mouseenter y mouseleave que son mucho más fáciles de usar porque no son burbujas, pero (por supuesto) específicos de IE. Estos son tan útiles que los marcos están empezando a admitirlos incluso en navegadores que no lo hacen; Prototype y jQuery los proporciono, por ejemplo, y no me sorprendería demasiado si otros marcos también lo hacen. jQuery también proporciona la práctica función hover, lo que sería muy cercano a lo que quiere:

// jQuery 
$(".first-nav li a").hover(
    function(event) { 
     // The mouse has entered the element, can reference the element via 'this' 
    }, 
    function (event) { 
     // The mouse has left the element, can reference the element via 'this' 
    } 
); 

... que es en realidad un acceso directo para la creación de mouseenter y mouseleave manipuladores, pero aún así, maravillosamente conciso.

En Prototipo Es bastante similar:

// Prototype 
$$(".first-nav li a") 
    .invoke("observe", "mouseenter", function(event) { 
     // The mouse has entered the element, can reference the element via 'this' 
    }) 
    .invoke("observe", "mouseleave", function(event) { 
     // The mouse has left the element, can reference the element via 'this' 
    }); 

(OT:. En ambos casos, he utilizado las expresiones de función de línea anónimas sólo para no dar la impresión de que usted tiene que utilizar funciones con nombre I siempre recomienda usando funciones nombradas en código de producción, sin embargo)

Answer 2

Nº

(Bueno, Microsoft y Mozilla Expresiones enlaces podría permitir, pero ambos son de propiedad y debe ser evitado)

Asignar sus controladores de eventos de JavaScript. Las bibliotecas como YUI y jQuery le permiten elegir elementos para aplicarlos a los selectores de CSS. Event delegation le permite manejar eventos en elementos sin tener que asignarlos a cada uno explícitamente (lo cual es útil si los está agregando al documento después de que se cargue).

Answer 3

¿Por qué llamarlo desde el CSS, si quieres "para llamar a una función JS en vuelo estacionario ancla", ponga esto en su etiqueta:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("a").hover(function(){ 
     myFunctionInvoke(); 
    }); 
}); 
</script> 

o si tiene especial anclaje en cuenta solo el cambio el selector

Answer 4

Porque es más lógico hacerlo desde CSS.

Si uno quiere hacer enlaces, haga clic en el control deslizante, es una cualidad estética y debe manejarse con CSS. Por ejemplo:

#header_menu li a:hover{ 
    color:white; 
    js:click(); 
} 

Answer 5

En realidad. Sí tu puedes. Sólo tiene que usar javascript: en el fondo-URL así:

<STYLE type="text/css">BODY{background:url("javascript:yourFunction();")}</STYLE> 

No del todo seguro de si esto funcionará sin embargo.

¡Salud!