jQuery鼠标事件之focusin与focuout事件
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.7jQuery鼠标事件之focusin与focuout事件</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.focusin()
$('input').focusin(function(){
$(this).css('background-color','#ccc');
});
//2.focusout()
$('input').focusout(function(){
$(this).css('background-color','#F9F');
});
//3.非表单元素上的focusin()与focusout()
$('#div1').focusin(function(){$(this).css('border','solid 2px red');})
.focusout(function(){$(this).css('border','solid 2px blue');});
});
</script>
</head>
<body>
<div id="div1">
账号:<input type="text" id="account"><br>
密码:<input type="password" id="pass"><br>
</div>
</body>
</html>
默认效果图
鼠标在账号文本框中获得焦点
鼠标在账号文本框中失去焦点
