使用鼠标悬停调用函数。 （不同的选择）

Question

我有这个选择器。目前，当切换（单击）不同选项时，它会调用一个函数。现在我希望使用另一个function2()，当我只将鼠标移到选项上而不是点击它时。点击该选项后，应调用function1()。怎么做？

<select id = "nextGeneration" onchange="function1()" >
    <option value="1">1</option>
    <option value="2">2</option> 
</select> 

Answer 1

使用jquery？

<select id = "nextGeneration">
    <option value="1">1</option>
    <option value="2">2</option> 
</select> 

<script>

$("#nextGeneration").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
});

$("#nextGeneration").ready(function(){
    $("#nextGeneration").change(function(){
        alert("The select has been changed.");
    });
});

</script>

Answer 2

使用mouseover事件：

function handleChange() {
    console.log('change')
}

function handleMouseover(e) {
    console.log('mouseover')
}

<select onchange='handleChange()' onmouseover='handleMouseover(event)'>
    <option>1</option>
    <option>2</option>
</select>