我尝试了以下两种方法来显示每个具有类名头像的 div所附带的隐藏内容。 Users Profile with Link 当我在页面上有多个头像元素时,第一个使用hover并且工作正常。 不幸的是,工具提示内置了可点击链接,hover不允许我点击链接。 $(‘.avatar a’).hover(function () { $(this).contents(‘div:last-child’).css({ display : ‘inline’ }); }, function () { $(this).contents(‘div:last-child’).css({ display : ‘none’ }); }); 不幸的是,工具提示内置了可点击链接,hover不允许我点击链接。 我拼凑的编码是我在这里找到的使用mouseenter和mouseleave的编码。 这个也有效,它允许我点击链接。 var hover = null; $(‘.avatar a’).bind(‘mouseleave’, function() { var $this = $(this).contents(‘div:last-child’); hover = setTimeout(function() { $this.fadeOut(400); }, 800); }); $(‘.avatar a’).bind(‘mouseenter’, function() { $(this).contents(‘div:last-child’).css({display:’block’}); […]
我试图使用数组索引,以便在触发mouseenter和mouseleave函数时允许一组div ID从一个ID更改为另一个ID。 我知道还有其他方法可以做到这一点 – 切换,hover或CSShover。 这只是为我学习,我很新。 下面的代码被注释,并且基本问题与“largeID”(或smallID)的数组变量输出正确值的原因有关,但尝试使用索引值则不然。 对于每个for语句,我希望当鼠标进入div时,smallID [i]值被替换为largeID [i]值,但我不想为每个值编写代码,即“largeID [1] ,largeID [2]。 谢谢你的任何指示!! $(document).ready(function() { var smallID = []; var largeID = []; var divList = document.getElementsByTagName(‘div’)[1]; //get the second (radialMenu) div in the document var radialDivList = divList.getElementsByTagName(‘div’); // get all divs under the second (radialMenu) div for(var i = 0; i < […]
当我的页面加载时,我想在我的菜单项’#currentitem a’上触发一个’#currentitem a’ 。 我做过的事: $(document).ready(function(){ $(“#currentitem a”).trigger(‘mouseenter’); }); 我的问题是,如果我mouseenter(手动)另一个项目,触发(上面的代码)项目不会鼠标移动。 菜单项重叠。 我是新手,如果可能,我想实现以下目标? 在页面加载上’#currentitem a’ 。 当另一个项目触发了’#currentitem a’时,mouseleave ‘#currentitem a’ 。 当该菜单项触发mouseleave时,请输入’#currentitem a’以便在没有其他任何内容时始终触发该项。 该菜单是更复杂的jQuery设置的一部分,而不仅仅是简单的CSS,所以这是我能看到的最佳方式。 任何帮助将非常感激。 我现在已经创建了一个JSFiddle来显示我想要做的事情: http://jsfiddle.net/qFS84/
下面是我正在使用的代码,我一直在使用.mouseenter(function(){没有问题…我一直在阅读当你使用.live()时它将事件应用于现有的和新的dom元素但是有些原因现在这个函数根本不起作用,我的语法有问题吗? $(document).ready(function(){ $(“div#rows div.row div:nth-child(1)”,this).nextUntil(‘nth-child(2)’).on(“mouseenter”, function() { $(‘img’,this).stop().animate({“bottom”:”0px”}, “fast”); }); $(‘div’,this).off(“mouseleave”).on(“mouseleave”, function() { $(‘img’,this).stop().animate({“bottom”:”94px”}, “fast”); }); }); $(document).ready(function(){ $(“div#rows div.row div:nth-child(3)”,this).nextUntil(‘nth-child(4)’).on(“mouseenter”, function() { $(‘img’,this).stop().animate({“bottom”:”0px”}, “fast”); }); $(‘div’,this).off(“mouseleave”).on(“mouseleave”, function() { $(‘img’,this).stop().animate({“bottom”:”99px”}, “fast”); }); }); 更新代码使用.on而不是.live …动画正在使用第一组post,但是ajax加载了分页的所有内容仍然没有触发事件… Salina Cruz | Mexico Lorem ipsum dolor May 13th, 2012 by admin Wakeboard Rails | Quick Silver Lorem ipsum dolor […]
这是我的小提琴 几乎完全不同于mouseenter,mouseleave,click function(.item)的工作并不总是有效 – 需要点击才能重新开始工作吗? 这是为什么 – 这是我的代码 – $(document).ready(function () { $(‘.timelineTile’).click(function (evt) { evt.stopPropagation(); $(‘.timelineTile’).not(this).removeClass(‘clicked’).find(‘.pull_down_content’).height(0); $(this).toggleClass(‘clicked’); if(!$(‘.timelineTile’).hasClass(“clicked”)){ $(this).children(‘.pull_down_content’).height(0); } }); }); $(document).click(function () { $(‘.timelineTile’).removeClass(‘clicked’); $(‘.pull_down_content’).height(0); $(‘.inner’).stop().css({‘display’: ‘none’}, 300); }); $(document).ready(function () { $(‘.timelineTile’).children(‘.item’).on(‘mouseenter mouseleave click’, function(e) { e.stopPropagation(); if ($(this).parent(‘.timelineTile’).hasClass(“clicked”)) { if (!$(this).data(‘clicked’)) { var Height = e.type===’mouseenter’ ? ’90px’ : e.type===’click’ […]
所以我遇到了这个奇怪的问题。 我有一条丝带在导航后面移动,同时hover在物品上,它包含绘制丝带形状的旧css-corner技巧。 这些是由负底部属性定位的。 奇怪的是,.mouseenter事件似乎是在“this”中添加了“overflow:none”类。 有办法防止这种情况吗? 我的第二个问题是,如果鼠标刚刚经过,我怎么能阻止.mouseenter启动,有点像hoverIntent。 我以为mouseenter正在这样做,但显然不是。 任何有关如何缩短和更好的提示也是受欢迎的。 这是代码,我正在运行noConflict脚本,所以’j’转换为$: function rbHover(){ j(“#nav li a”) .on(‘mouseenter’, function() { var l = j(this).parent().position().left; var w = j(this).parent().width(); var rbw = Math.round(w/4); var rbh = Math.round(w/16); j(“#ribbon”).stop(‘ribbon’, true, true).animate({ “left” : l, “width” : w }, { duration: 600, easing: ‘swing’, queue: ‘ribbon’ }).dequeue(‘ribbon’); j(“.rib-left”).stop(‘rib-left’, true, true).animate({ “border-right-width”: […]
我不知道确切的技术词汇,但是在关于’mouseenter’和’mouseleave’事件的jquery代码中,整个div会像按钮点击一样运动(闪烁?)而且我也使用’mouseover’和’mouseout’但同样的问题发生。 $total_doctors=mysql_fetch_array(mysql_query(“select count(*) from doctor”)); 主要部分: Doctor 0 脚本代码: var docNumbr = ; $(document).ready(function(){ $({countNum: $(‘#countdoctor’).text()}).animate({countNum: docNumbr}, { duration: 2000, easing:’linear’, step: function() { $(‘#countdoctor’).text(Math.floor(this.countNum)+1); } }); $(‘#countdoctor’).mouseenter(function(){ $(this).text(“Total Records: “+docNumbr).css({“opacity” : “0.5”, “font-size” : “14px” }); }).mouseleave(function(){ $(‘#countdoctor’).text(docNumbr).css({“opacity” : “1.0”, “font-size” : “25px” }); }); }); 我想避免在mouseenter和mouseleave上调整div的大小。
我如何编写一个mouseenter事件来触发定时器关闭以及一个mouseleave事件来触发定时器 ? 如果达到计时器间隔,则网页将刷新。 我试过这样做但是无法解决这个问题: $(document).ready(function() { var timer; function start() { timer = setInterval(function(){refresh()}, 5000); } start(); $(‘body’).mouseenter(function() { clearTimeout(timer); }); }).mouseleave(function(e) { var pageX = e.pageX || e.clientX, pageY = e.pageY || e.clientY; if (pageX <= 0 || pageY <= 0) { start(); } else clearTimeout(timer); }); function refresh() { window.location.reload(true); }); (此代码部分取自此处: https […]
hoverintent插件与我需要的相反。 我有一个由.trigger触发的.popup,当我将它hover时,我希望.popup不会淡出几秒钟,但是如果我将其hover,然后再次hover,则取消将要发生的淡出并保持.popup打开。 有谁知道我会怎么做? 这不起作用,但这是一个想法: $(‘.trigger’).hover(function(){ $(‘.popup’).fadeIn(600) }, function() { $(‘.popup’).delay(2000, function(){ if ($(this).blur() = true) { $(‘.popup’).fadeOut(600) } }); })
我正在创建一个站点,您将鼠标hover在图像上,它显示一个元素(在这种情况下,通过将其高度从0扩展到154px)。 jQuery(document).ready(function(){ jQuery(“#dropdown-menu-create .dropimage”).mouseover(function(){ jQuery(“#dropdown-menu-create .toggle”).animate({height:”154px”},200); }); jQuery(“#dropdown-menu-create .dropimage”).mouseout(function(){ jQuery(“#dropdown-menu-create .toggle”).animate({height:”0″},200); }); }); 当鼠标离开时内容会扩展,当鼠标离开时内容会折叠,但每次鼠标在元素内移动时,内容会反复展开和折叠,直到鼠标离开元素。 我之前从未遇到过这个问题,过去我曾经使用过这些function,所以我不知道发生了什么。 有任何想法吗? 编辑: jQuery(document).ready(function(){ jQuery(“#dropdown-menu-create .dropimage”).mouseenter(function(){ jQuery(“#dropdown-menu-create .toggle”).stop(true,true).animate({height:”154px”},200); }); jQuery(“#dropdown-menu-create .dropimage”).mouseleave(function(){ jQuery(“#dropdown-menu-create .toggle”).stop(true,true).animate({height:”0″},200); }); }); 我现在使用上面的代码,仍然得到完全相同的问题。 我已经尝试过.stop函数的所有变体(false,false)(false,true)(true,false)(true,true)。 每个问题都会出现不同的问题,但仍然会发生。 终极编辑: 问题是,一旦调用该函数,鼠标所覆盖的内容就会被不同的内容覆盖。 因此,在任何给定点,鼠标同时进入和离开图像。 通过将函数调用移动到另一个元素来解决问题。