1、效果图
2、核心代码
$(".name").focus(function(){ // focus鼠标聚焦 触发的事件
$(".name").blur(function(){ // blur失去焦点 触发的事件
$("div").mouseover(function(){ // mouseover鼠标悬停时 触发的事件
$("div").hover(function(){ // hover 得到焦点时显示 红色 ，失去焦点显示蓝色
$(this).css("background-color","red");
},function(){
$(this).css("background-color","blue");
})
$("p").dblclick(function(){ // dblclick 双击时变色。
3、代码
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<!-- var jq=jQuery.noConflict()，用来解决名称冲突的问题，现在暂时用不到，以后也许会用 -->
<script type="text/javascript">
$(document).ready(function(){ //这行代码等于$(fucntion(){
$(".name").focus(function(){
$(this).css("background-color","red"); // 已经获取到鼠标的焦点时显示 红色
});
$(".name").blur(function(){
$(this).css("background-color","green");//失去焦点时显示 绿色
});
$("div").mouseover(function(){
$(this).css("background-color","blue"); //单一得到焦点时显示 蓝色
});
$("div").hover(function(){
$(this).css("background-color","red"); //得到焦点时显示 红色，失去焦点显示蓝色
},function(){
$(this).css("background-color","blue");
})
$("p").dblclick(function(){
$(this).css("background-color","blue"); //双击会变蓝色
});
});
</script>
</head>
<style type="text/css">
div{
background-color:#e5eecc;
padding:20px;
border:solid 1px #c3c3c3;
}
p{
background-color:#e5eecc;
padding:20px;
border:solid 1px #c3c3c3;
}
</style>
<body>
<span>输入name：<input type="text" class="name"/></span>
<div>
触发或将函数绑定到被选元素的 鼠标悬停事件 悬停变红色，鼠标离开将会变成 蓝色
</div>
<p>
触发或将函数绑定到被选元素的 双击鼠标事件 会变为蓝色
</p>
</body>
</html>
1142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
