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

【问题标题】：Call a function with mouseover. (Different options)使用鼠标悬停调用函数。（不同的选择）
【发布时间】：2018-01-28 07:08:23
【问题描述】：

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

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

【问题讨论】：

你想在鼠标悬停时发生什么？
也许只是突出一些 DOM 元素。
这对于普通的 JS 来说似乎并不容易。如果您可以灵活地考虑使用 jQuery，请同样进行搜索。有很多 SO 答案显示 jQuery 解决方案。

标签： javascript html onchange mouseover options

【解决方案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>

【讨论】：

除非还包含框架/库的另一个标签，否则需要纯 JavaScript 答案。 Source
$('#nextGeneretor') 用于您可以使用 this 参考的地方

【解决方案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>

【讨论】：