<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标指向图片时为图片加边框</title>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#pic").hover(function(){
$(this).attr("border",1);//为图片加边框
},function(){
$(this).attr("border",0);//去除图片边框
});
});
</script>
</head>
<body>
<img id="pic" src="images/mr.gif" />
</body>
</html>这段文字中的"border",1和"border",0和悬停有啥关系？
他不就是函数规定的属性吗，没见和hover有啥联系啊，
所谓的hover(over，out)里面的两个参数就是这2个吗？
好像不是啊，那为什么还能实现悬停效果啊？
我来帮你理清jQuery hover方法中参数与border属性的关系。
核心关系说明：
hover方法的两个参数是函数，而不是直接的属性值。
当鼠标悬停时执行第一个函数，离开时执行第二个函数。
$("#pic").hover(
function(){ $(this).attr("border",1); }, // 鼠标进入时执行
function(){ $(this).attr("border",0); } // 鼠标离开时执行
);工作原理：
鼠标悬停时 → 触发第一个函数 → 设置
border="1"鼠标离开时 → 触发第二个函数 → 设置
border="0"
参数对应关系：
function(){ $(this).attr("border",1); }→ 鼠标进入处理函数function(){ $(this).attr("border",0); }→ 鼠标离开处理函数
这里的"border",1和"border",0是在各自函数内部执行的代码，通过attr()方法修改图片的border属性5。
更现代的写法建议：
使用CSS来控制边框样式会更优雅：
#pic:hover {
border: 1px solid #000;
}或者用jQuery的addClass/removeClass方法。
💡 实用建议：你可以尝试在控制台输入console.log($("#pic"))
来查看hover事件绑定后的元素状态变化，这样能更直观地理解事件触发与属性修改的关联。