jQuery hover() event on div element within a button element

Question

I can't seem to get jQuery to notice the div within the following markup

<button class="button submit positive right" id="omnisubmit" type="submit">
    <div class="label">Submit</div> 
    <div class="controller">&nbsp;</div>
</button>

And here is the jQuery I'm currently using:

$("button#omnisubmit div.controller").hover(function () {
            console.log("Hover...");
        });

However, jQuery doesn't seem to pick up when the mouse is hovering over that div, $("button#omnisubmit div.controller").hover(... works correctly, of course.

I have a feeling it's because putting divs inside buttons may not be standard HTML?

Answer 1

Sounds like what you really should do is have two button elements that are styled to look like one.

Something like the jQuery UI Button element split button example.