web-dev-qa-db-fra.com

Appeler JavaScript depuis une fonction depuis CSS

Existe-t-il un moyen d'appeler ma fonction JavaScript à partir de CSS?

Pour ex voici le style:

.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;
}

et je veux appeler une fonction JS en vol stationnaire.

javascriptcss
21
BreakHead

Non, vous ne pouvez pas déclencher JavaScript directement à partir de CSS.

Ce que vous pouvez faites, c’est utilisez des sélecteurs CSS pour rechercher les éléments que vous souhaitez surveiller, puis observez les événements de souris. Les événements standard sont mouseover et mouseout, mais ils peuvent être un peu difficiles à manipuler car ils sont en bulle (vous obtenez mouseout, par exemple, chaque fois que la souris quitte un élément descendant). Avec la logique appropriée, cependant, ils ne sont pas trop difficiles à utiliser. En fait, si vous en avez beaucoup, vous voudrez probablement utiliser mouseover et mouseout plutôt que l’alternative ci-dessous, car vous pouvez les définir uniquement sur un conteneur parent. puis déterminez quel élément descendant est impliqué, ce qui peut être plus simple dans certains cas (et plus compliqué dans d'autres).

IE fournit mouseenter et mouseleave qui sont beaucoup plus faciles à utiliser car ils ne font pas de bulles, mais (bien sûr) spécifiques à IE. Celles-ci sont si pratiques que les frameworks commencent à les prendre en charge même dans les navigateurs qui ne le font pas; Prototype et jQuery leur fournir, par exemple, et je ne serais pas trop surpris si certains autres cadres font de même. jQuery fournit également la fonction hover , très pratique, qui serait très proche de ce que vous voulez:

// 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'
    }
 );

... qui n'est en réalité qu'un raccourci pour la configuration des gestionnaires mouseenter et mouseleave, mais néanmoins, merveilleusement concis.

Dans Prototype, c'est assez similaire:

// 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: Dans les deux cas, j’ai utilisé des expressions de fonction inline anonymes uniquement pour éviter de donner l’impression que vous devez utiliser des fonctions nommées. Je toujours recommande d’utiliser des fonctions nommées dans le code de production.)

26
T.J. Crowder

Non. 

(Eh bien, Microsoft Expressions et Mozilla Bindings pourraient le permettre, mais les deux sont propriétaires et doivent être évités)

Attribuez vos gestionnaires d'événements à partir de JavaScript. Des bibliothèques telles que YUI et jQuery vous permettent de choisir des éléments à appliquer aux sélecteurs CSS. Délégation d'événements vous permet de gérer des événements sur des éléments sans avoir à les affecter explicitement (ce qui est pratique si vous les ajoutez au document après son chargement).

5
Quentin

Pourquoi voudriez-vous l'appeler depuis votre css, si vous voulez "appeler une fonction JS sur le survol de l'ancre", mettez ceci dans votre tag:

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

ou si vous avez une ancre particulière à l'esprit, il suffit de changer le sélecteur

3
ant

Parce que c'est plus logique de le faire à partir de CSS.

Si l'on veut faire des liens, cliquez sur le survol, c'est une qualité esthétique et doit être traitée avec CSS. Par exemple:

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