Mouse "down/up" and "enter/leave" style for a button which is overlapped by transparent Flash object

Question

I have a Flash object which dimension and position are as same as the HTML button. The button is under the flash object. I want when the Flash is clicked and hovered, the button has the styles as if it is clicked and hovered at the same time.

I am trying to call:

ExternalInterface.call("mouseEventHandle", elementId, eventName);

in Flash to pass event to JS.

And in JS (coffeescript):

window.mouseEventHandle = (elementId, eventName) ->
    id = '#' + elementId
    switch event
        when "down" then console.log("down")
        when "up" then console.log("up")
        when "enter" then console.log("enter")
        else console.log("leave") # leave

the function is responsible for styling the HTML button.

The question is how to style the button under in JS? Or is there other way to achieve the goal?

Answer 1

I finally use jquery buttons:

$("input[class!='hidden-input']").button()

so the handler function looks like:

window.mouseEventHandle = (id, event) ->
        switch event
            when "e" 
                $(id).addClass("ui-state-hover")            # enter
                return false
            when "l" 
                $(id).removeClass("ui-state-hover ui-state-active")     # leave
                return false
            when "d" 
                $(id).addClass("ui-state-active")           # down
                return false
            else 
                $(id).removeClass("ui-state-active ui-state-hover") # up
                return false

returning "false" allows browsers have quick reaction.