Home > Article > Web Front-end > How to use jquery to increase the width of li when the mouse is hovering
How to use jquery to increase the width of li when the mouse is hovering
- 青灯夜游Original
- 2022-03-23 17:46:091817browse
Method: 1. Use hover() to set the processing function to be run when the mouse hovers over the li element, the syntax is "$("li").hover(function(){})"; 2 . In the processing function, use width() to increase the width of the li element, the syntax is "$("li").width("value");".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery implements the effect of increasing the width of li when the mouse is hovering
Implementation ideas:
Use the hover() method to li Bind the mouse hover event to the element and set the event processing function
In the processing function, use width() to increase the width of the li element
Implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("li").hover(function() {
$("li").width("100%");
}, function() {
$("li").width("200px");
});
});
</script>
</head>
<body>
<ul>
<li style="background-color: pink;width:200px ;">鼠标移动到该li元素上</li>
</ul>
</body>
</html>
jQuery video tutorial, web front-end development]
The above is the detailed content of How to use jquery to increase the width of li when the mouse is hovering. For more information, please follow other related articles on the PHP Chinese website!