如何在Jquery中将Onclick事件更改为鼠标悬停 [英] How Do I Can Change Onclick Event To Mouse Hover In Jquery
本文介绍了如何在Jquery中将Onclick事件更改为鼠标悬停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的代码
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屋!
查看全文