最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于jQuery鼠标悬停事件.hover()的使用详解

来源:动视网 责编:小采 时间:2020-11-27 20:18:38
文档

关于jQuery鼠标悬停事件.hover()的使用详解

关于jQuery鼠标悬停事件.hover()的使用详解:在JQuery中提供了.hover()事件,以简化Dom中的mouseenter(鼠标进入),和mouseleave(鼠标离开)事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数。如下代码所示:<!doctype
推荐度:
导读关于jQuery鼠标悬停事件.hover()的使用详解:在JQuery中提供了.hover()事件,以简化Dom中的mouseenter(鼠标进入),和mouseleave(鼠标离开)事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数。如下代码所示:<!doctype


在JQuery中提供了.hover()事件,以简化Dom中的mouseenter(鼠标进入),和mouseleave(鼠标离开)事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数。如下代码所示:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>hover demo</title>
 <style>
 ul {
 margin-left: 20px;
 color: blue;
 }
 li {
 cursor: default;
 }
 span {
 color: red;
 }
 </style>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
 <li>Milk</li>
 <li>Bread</li>
 <li class="fade">Chips</li>
 <li class="fade">Socks</li>
</ul>
 
<script>
$( "li" ).hover(//为li绑定了鼠标进入和鼠标移开的两个参数
 function() {
 $( this ).append( $( "<span> ***</span>" ) );
 }, function() {
 $( this ).find( "span:last" ).remove();
 }
);
 
$( "li.fade" ).hover(function() {<pre name="code" class="html" style="color: rgb(51, 51, 51); 
font-size: 14px; line-height: 26px;">//为li元素下的class类是fade的所有元素绑定了鼠标进入参数
$( this ).fadeOut( 100 );
 $( this ).fadeIn( 500 );});
</script> 
</body>
</html>

文档

关于jQuery鼠标悬停事件.hover()的使用详解

关于jQuery鼠标悬停事件.hover()的使用详解:在JQuery中提供了.hover()事件,以简化Dom中的mouseenter(鼠标进入),和mouseleave(鼠标离开)事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数。如下代码所示:<!doctype
推荐度:
标签: 使用 鼠标 事件
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top