jquery鼠标移入移出没效果 90
1个回答
2018-11-29 · 品牌创于1988，专注IT教育
江西新华电脑学院
江西新华电脑学院开设电子商务、软件开发、电竞、动漫设计、UI设计、室内设计、网络工程、互联网财务、VR等专业。 来校参观报销路费，报名享受国家学费减免政策，签订就业合同，毕业推荐高薪工作。
向TA提问
关注
![]()
展开全部
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script src="
6 <style type="text/css">
7 .wrapper li{
8 list-style-type: none;
9 width: 100px;
10 height: 20px;
11 border: 1px solid #ccc;
12 text-align: center;
13 }
14 /*需要切换的hover类*/
15 .hover{
16 background-color: blue;
17 color: white;
18 font-weight: bold;
19 }
20 </style>
21
22 </head>
23 <body>
24 <ul class="wrapper">
25 <li>1111111</li>
26 <li>2222222</li>
27 <li>3333333</li>
28 <li>4444444</li>
29 <li>5555555</li>
30 <li>6666666</li>
31 <li>7777777</li>
32 </ul>
33 <script type="text/javascript">
34 // 鼠标移入移出事件
35 $('li').hover(function() {
36 // 鼠标移入时添加hover类
37 $(this).addClass('hover')
38 }, function() {
39 // 鼠标移出时移出hover类
40 $(this).removeClass('hover')
41 });
42 </script>
43 </body>
44 </html>
hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发mouseenter和mouseleave事件
2 <html>
3 <head>
4 <title></title>
5 <script src="
6 <style type="text/css">
7 .wrapper li{
8 list-style-type: none;
9 width: 100px;
10 height: 20px;
11 border: 1px solid #ccc;
12 text-align: center;
13 }
14 /*需要切换的hover类*/
15 .hover{
16 background-color: blue;
17 color: white;
18 font-weight: bold;
19 }
20 </style>
21
22 </head>
23 <body>
24 <ul class="wrapper">
25 <li>1111111</li>
26 <li>2222222</li>
27 <li>3333333</li>
28 <li>4444444</li>
29 <li>5555555</li>
30 <li>6666666</li>
31 <li>7777777</li>
32 </ul>
33 <script type="text/javascript">
34 // 鼠标移入移出事件
35 $('li').hover(function() {
36 // 鼠标移入时添加hover类
37 $(this).addClass('hover')
38 }, function() {
39 // 鼠标移出时移出hover类
40 $(this).removeClass('hover')
41 });
42 </script>
43 </body>
44 </html>
hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发mouseenter和mouseleave事件
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
