JQuerymouserover事件 mouserout事件 jquery链式写法addClass方法

tech2022-12-16  117

JQuery mouserover事件 mouserout事件 jquery链式写法 addClass方法

当鼠标悬停在某个div上的时候,改变div的大小,同时,在移出该div的时候添加边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* .dd{ border: 2px solid black; } */ #box{ width: 100px; height: 100px; background-color: green; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>Document</title> </head> <body> <div id="box"></div> <script> $(function(){ $('#box').mouseover(function(){ $('#box').css({ 'width':'200px',"height":"200px","backgorund-color":"red" }) .mouseout(function(){ $(this).addClass('dd'); $('.dd').css('border','2px solid black'); }) }) }) </script> </body> </html>
最新回复(0)