Why mousehover don't work in this Jquery code?

Question

I need to add a attribute to body when users hover by a dropdown selector. This is my code.

<select id="pa_cor" class="" name="attribute_pa_cor" data-attribute_name="attribute_pa_cor" "="" data-show_option_none="yes" >
    <option value="">Escolha uma opção</option>
    <option value="cinza" class="attached enabled">Cinza</option>
    <option value="rosa" class="attached enabled">Rosa</option>
    <option value="verde" class="attached enabled">Verde</option>
    <option value="vermelho" class="attached enabled">Vermelho</option>
</select>

JS

$('#pa_cor').change(function() {
    $('body').attr('produto', $(this).val());
});


// trigger the change event
$('#pa_cor').trigger('change');

I tried to change the change(function() to mousehover(function() and hover(function() but they didn't work.

Can anyone help? If necessary I can send printscreen that I'm trying to use the codes.

Answer 1

Have you considered using the .hover()

$( "#pa_cor" ).hover(function() {
    // code
});

or:

$( "#pa_cor" ).on("mouseover", function () {
    // code
});

When you say:

when users hover by a dropdown selector

I assume you mean hover over the Select Drop Down?

Answer 2

Try this.

$('#pa_cor').on('change', function() {
  alert( this.value );
})