CODEWITHSUNDEEP
jquery
user1645419
user1645419

Reputation: 217

jquery handle mouseover mouseleave option

I have the following isse:

I have a select menu like this:

<select id="selectClass" name="bookClass" data-native-menu="false" data-mini="true">
    <option selected="selected" value="A">CLASS A</option>
    <option value="B">CLASS B</option>
    <option value="C">CLASS C</option>
    <option value="D">CLASS D</option>
</select>

and I want to handle the mouseover and mouseleave event for each option element of the <select> (I don't want handle the mouseover, mouseleave event for the select). How can I do that?

Upvotes: 1

Views: 291

Answers (2)

Alnitak
Alnitak

Reputation: 339846

An <option> isn't a visible element in its own right. It's just data for a <select> element, which in most cases is rendered with a native O/S control.

AFAIK this can't be done, at least not in a cross-browser fashion. It does appear to work in Firefox.

EDIT it does actually also work in Webkit browsers but only if the <select> element has a size attribute, such that more than one <option> is visible.

Upvotes: 3

Zoltan Toth
Zoltan Toth

Reputation: 47667

You can do that - DEMO

$("option").on("mouseover", function(e) {
    e.stopPropagation();

    $("p").text( $(this).val() );
});

UPDATE: sadly works in Firefox only

Upvotes: 1

Related Questions