方法:1、用hover()设置当鼠标悬停在li元素上时要运行的处理函数,语法“$("li").hover(function(){})”;2、在处理函数中,用width()给li元素增加宽度,语法“$("li").width("值");”。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery实现鼠标悬停时li增加宽度效果
实现思路:
使用hover()方法给li元素绑定鼠标悬停事件,并设置事件处理函数
-
在处理函数中,用width()给li元素增加宽度
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本,由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用,尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
实现代码:
html>
<meta><script></script><script>
$(document).ready(function() {
$("li").hover(function() {
$("li").width("100%");
}, function() {
$("li").width("200px");
});
});
</script>
- 鼠标移动到该li元素上

【推荐学习:jQuery视频教程、web前端开发】










