如何在Jquery中将Onclick事件更改为鼠标悬停 [英] How Do I Can Change Onclick Event To Mouse Hover In Jquery

问题描述

这是我的代码

 articleShowcase： function （）{
  //   jQuery（'。article-showcase article'） .on（'click'，function（）{ 
  //   jQuery（'。article -showcase article.active'）。removeClass（'active'）;  
  //   jQuery （this）.addClass（'active'）;  
  //   var link = jQuery（这个）.attr（'rel'）;  
  //   jQuery（'。article- showcase .big-article.active'）。removeClass（'active'）。fadeOut（'slow'，function（）{ 
  //   jQuery（'。article-showcase .big-article [rel ='+ link +']'）。fadeIn（ '慢'）;  
  //   jQuery（'。article-showcase .big-article [rel ='+ link +']'）。addClass（'active'）;  
  //  }）;  
  //  }）;  
 jQuery（' 。article-showcase article'）。onmouseover（ function （）{
 jQuery（' 。article-showcase article.active '）。removeClass（'  active'）; 
 jQuery（ this ）。addClass（' 活性）; 
  var  link = jQuery（ this ）。attr（'  rel'）; 
 jQuery（' 。article-showcase .big-article.active'）。removeClass（ '  active'）。fadeOut（'  slow'， function （）{
 jQuery（' 。article-showcase .big-article [rel =' + link + ' ]'）。fadeIn（'  slow'）; 
 jQuery（' 。article-showcase .big-article [rel =' + link + ' ]'）。addClass（'  active'）; 
}）; 
}）; 
 
}，
 

注释代码效果不错

但我会改变jQuery（'。article-showcase article'）。on（'click'，function（）...

鼠标悬停



未注释的代码不起作用!!!!



请帮助我

解决方案

< pre lang =Javascript> jQuery（' 。article-showcase article'）。on（' mousehover'， function （）{
jQuery（' 。article-showcase article.active'）。removeClass（' active'）;
jQuery（ this ） .addClass（' active'）;
var link = jQuery（ this ）。attr（' 相对）;
jQuery（' 。article-showcase .big-article.active'）。removeClass（ ' active'）。fadeOut（' slow'， function （）{
jQuery（' 。article-showcase .big-article [rel =' + link + ' ]'）。fadeIn（' slow'）;
jQuery（' 。article-showcase .big-article [rel =' + link + ' ]'）。addClass（' active'）;
}）;
}）;

}，

hi it is my code

articleShowcase: function () {
    //jQuery('.article-showcase article').on('click', function () {
    //    jQuery('.article-showcase article.active').removeClass('active');
    //    jQuery(this).addClass('active');
    //    var link = jQuery(this).attr('rel');
    //    jQuery('.article-showcase .big-article.active').removeClass('active').fadeOut('slow', function () {
    //        jQuery('.article-showcase .big-article[rel="' + link + '"]').fadeIn('slow');
    //        jQuery('.article-showcase .big-article[rel="' + link + '"]').addClass('active');
    //    });
    //});
    jQuery('.article-showcase article').onmouseover( function () {
        jQuery('.article-showcase article.active').removeClass('active');
        jQuery(this).addClass('active');
        var link = jQuery(this).attr('rel');
        jQuery('.article-showcase .big-article.active').removeClass('active').fadeOut('slow', function () {
            jQuery('.article-showcase .big-article[rel="' + link + '"]').fadeIn('slow');
            jQuery('.article-showcase .big-article[rel="' + link + '"]').addClass('active');
        });
    });

},

the commented code worked nice
but i will changed jQuery('.article-showcase article').on('click', function ()...
to mouse hover

un commented code dont work!!!!

please help me

解决方案

jQuery('.article-showcase article').on('mousehover', function () {
         jQuery('.article-showcase article.active').removeClass('active');
         jQuery(this).addClass('active');
         var link = jQuery(this).attr('rel');
         jQuery('.article-showcase .big-article.active').removeClass('active').fadeOut('slow', function () {
             jQuery('.article-showcase .big-article[rel="' + link + '"]').fadeIn('slow');
             jQuery('.article-showcase .big-article[rel="' + link + '"]').addClass('active');
         });
     });

 },

这篇关于如何在Jquery中将Onclick事件更改为鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！