Jquery mouseover()
当您将鼠标指针悬停在所选元素上时，将发生mouseover事件。一旦发生mouseover事件，它将执行mouseover()方法或附上要运行的功能。
此事件通常与mouseout()事件一起使用。
注意: 大多数人在mouseenter和mouseover之间感到困惑。
mouseenter()和mouseover()之间的差异
仅当鼠标指针进入所选元素时，才会触发mouseenter事件，而如果鼠标进入，mouseover事件就会触发光标输入任何子元素以及选定的元素。
语法:
它触发选定元素的鼠标悬停事件。
$(selector).mouseover(function)
它为mouseover事件添加了一个函数。
jQuery mouseover()事件的参数
| 参数 |
说明 |
| function |
这是一个可选参数。触发mouseover事件时，它会自行执行。 |
jQuery mouseover()事件的示例
让我们以一个示例来演示jQuery mouseover()事件。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "lightgreen");
});
$("p").mouseout(function(){
$("p").css("background-color", "orange");
});
});
</script>
</head>
<body>
<p>Move your cursor over this paragraph.</p>
</body>
</html>
输出:
jQuery mouseover()事件示例2
让我们看看另一个jQuery mouseover()事件示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseover demo</title>
<style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: lightgreen;
}
div.in {
width: 60%;
height: 60%;
background-color: red;
margin: 10px auto;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="out">
<span style="padding:20px">移动鼠标</span>
<div class="in"></div>
</div>
<script>
$("div.out")
.mouseover(function() {
$( this ).find("span").text("mouse over ");
})
.mouseout(function() {
$( this ).find("span").text("mouse out ");
});
</script>
</body>
</html>
输出:
