使用鼠标悬停调用函数.(不同的选项)

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>