Calling JavaScript from function from CSS

Question

Is there any way that I can call my JavaScript function from css?

For ex here is 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;
}

and I want to call a JS function on anchor hover.

Answer 1

No.

(Well, Microsoft Expressions and Mozilla Bindings might allow it, but both are proprietary and should be avoided)

Assign your event handlers from JavaScript. Libraries such as YUI and jQuery allow you to pick elements to apply them to using CSS selectors. Event delegation allows you to handle events on elements without having to assign to each one explicitly (which is handy if you are adding them to the document after it loads).

Answer 2

Why would you call it from your css, if you want "to call a JS function on anchor hover", put this in your tag :

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

or if you have particular anchor in mind just change the selector

Answer 3

No, you can't trigger JavaScript from CSS directly.

What you can do is use CSS selectors to find the elements you want to watch in this way, and then watch for mouse events. The standard events are mouseover and mouseout, but they can be a bit tricky to work with because they bubble (you get mouseout, for instance, whenever the mouse leaves any descendant element). With appropriate logic, though, they're not to bad to work with, and in fact if you have lots of these, you probably want to use mouseover and mouseout rather than the alternative below because you can set them on just a parent container and then work out which descendant element is involved, which can be simpler in some cases (and more complicated in others).

IE provides mouseenter and mouseleave which are much easier to work with because they don't bubble, but (of course) IE-specific. These are so handy that frameworks are starting to support them even in browsers that don't; Prototype and jQuery provide them, for instance, and I wouldn't be too surprised if some other frameworks do as well. jQuery also provides the handy hover function, which would be very close to what you want:

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

...which is really just a shortcut for setting up mouseenter and mouseleave handlers, but still, wonderfully concise.

In Prototype it's quite 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: In both cases, I've used anonymous inline function expressions just to avoid giving the impression you have to use named functions. I always recommend using named functions in production code, though.)