Tag: hover

将鼠标hover在LI上以显示div

我在这里问了类似的问题,虽然我得到了一些答案,但我没有设法让它发挥作用。 简而言之,我有一个这样的UL列表: Caviar Athena Knot Brooke Leaf 贝娄,我有4个DIV。 除了第一个之外的所有这些都应该被隐藏,并且只有当用户将鼠标hover在上面的LI链接上时才会打开。 所以,简而言之。用户来到页面,第一个链接打开。他徘徊超过第二,第二个出现,同样的事情与第三,第四… Some text for the first link Some text for the second link Some text for the third link Some text for the fourth link

hoverdroppable时更改拖动克隆的大小?

$(“.drag”).draggable({ helper: ‘clone’, appendTo: “body” }); $( “.drop” ).droppable({ over: function(event, ui) { $(ui.draggable).css({width:’30px’,height:’30px’}); }, drop: function( event, ui ) { if($(ui.draggable).parent() !==$(this)){ $(ui.draggable).appendTo($( this )); $(ui.draggable).tooltip({ disabled: true }); $(ui.draggable).css({float:’left’}); } }}); 我正在尝试更改拖动克隆项目的大小,当我将鼠标hover在可放置区域上但保留原始大小相同(以便当鼠标hover在正确的放置区域时,附加到鼠标的项目会缩小)。 此代码更改原始但不更改克隆。 有什么建议?

jQuery Quick Flip切换回来

我正在使用jQuery插件Quick Flip,但我的一个页面有两个问题。 首先,我希望它在鼠标hover时翻转,这是我能够做到的,但我也希望它能够在你没有徘徊的情况下回到原来的状态。 在jQuery的论坛上,其他人提出了同样的问题,创作者说这是可能的,但是不会为它提供代码。 我尝试了不同的方法,甚至玩setTimeout来强制它,但我每次都不断破坏代码,所以我显然没有做对。 其次,如果面板包含链接,当你再次hover时,它有时根本不会翻转。 我的例子没有显示这一点。 知道为什么会这样吗? 这是我的例子: http : //kimkellermedia.com/test3/test2.html 现在js是: jQuery(function($){ $(‘.quickFlip’).quickFlip(); for ( var i = 0; i < $.quickFlip.wrappers.length; i++ ) { var thisOne = $.quickFlip.wrappers[i]; $( thisOne.wrapper ).hover( function(ev) { var $target = $(ev.target); if ( !$target.hasClass('quickFlip') ) $target = $target.parent(); $target.quickFlipper(); }, function() {}); } });

使用jQuery突出显示div,同时使其他人变灰

我已经在这个问题的一半,但已经陷入困境。 我相信过去已经提出过类似的问题,但没有什么是我正在寻找的。 我目前在jsFiddle上有一些演示代码可以在这里查看: http : //jsfiddle.net/WolfHook/jb36D/ HTML Image in Here… Image in Here… Image in Here… CSS #thumbsContainer { background:#000; padding:20px; overflow:auto;} .imageHolder { background:#eee; float:left; margin:5px; width:50px; height:50px; padding:5px; border:1px solid #666;} jQuery的 $(‘#thumbsContainer’).children(‘.imageHolder’).hover(function() { $(this).siblings().stop().animate({‘opacity’:’0.5′}); }, function() { $(this).siblings().stop().animate({‘opacity’:’1′}); }); 所需的效果是按正常方式显示所有div,然后一旦将鼠标hover在div上,其他周围的div会变灰或添加某种叠加。 目的是给出印象,突出显示鼠标指针所在的div。 你可以看到我在jsFiddle上的代码实现了这个但它对每个div应用了一个不透明度,而不是某种叠加层,这就是导致我出现问题的问题,在我当前的项目中,div位于背景图像上方而不是全黑色背景所以不透明度不会起作用,只会使整个事情看起来令人困惑。 理想情况下,我想在unhighlighted div上应用div叠加,我可以使用CSS来设置灰色效果。 在这个阶段,我完全愿意接受有关如何达到预期效果的建议。 任何人都可以填写并提供一些指示? 非常感激。

切换Jquery后删除/添加hover

我有这个css: .disable { properties } .comment_action:hover { properties } 我有这个jQuery: //comment button index disable $(“#mydiv”).toggle(function() { $(this).find(“.comment_action”).addClass(‘disable’); }, function(){ $(this).find(“.comment_action”).removeClass(‘disable’); }); 对我来说问题是,当我点击.comment_action时:hover不会消失或删除 。 我希望如果我点击类.comment_action:hover dissapear ,如果我再次点击,则会出现.comment_action:hover。

jQuery – hover事件中显示的非嵌套/非后代兄弟导航

我有2个导航区域。 第二个应该出现在第一个元素hover在其上时,如果鼠标没有移动它,它应该消失。 我基本上有: HTML item 1 item 2 1 sub item 1 1 sub item 2 2 sub item 1 2 sub item 2 当我将鼠标hover在li.1和ul.2上时,我希望ul.1出现,当我将鼠标hover在li.2上时,我希望它们只有在我没有盘旋在子区域时才会消失。 我已经让它工作了一部分: JAVASCRIPT var sections = new Array(‘1’, ‘2’); $.each(sections, function(i, section) { $(‘ul.main li.’ + section).hover( function() { $(‘div.sub ul’).hide(); $(‘div.sub ul.’ + section).show(); } ); }); 这将显示正确的部分并隐藏其他部分,但我无法弄清楚我需要什么,以便当鼠标离开ul.main li时,.sub ul如果没有hover在上面就会消失。 […]

jQuery – img src在hover和点击时更改

我有一个我创建的图像,我现在需要变成一个按钮。 根据按钮的状态,有四种不同的png文件: icon1-on.png,icon1-on-hover.png,icon1-off.png,icon1-off-hover.png 。 我需要为点击和hover更改img的src。 我的HTML是: 当按钮处于正常工作状态时,我有hover状态: $(“.sheild_icon”) .mouseover(function() { this.src = this.src.replace(‘-on.png’, ‘-on-hover.png’); }) .mouseout(function() { this.src = this.src.replace(‘-on-hover.png’, ‘-on.png’); }); 现在我需要将点击从icon1-on.png更改为icon1-off.png 。 当img src为icon1-off.png时,将鼠标hover在icon1-off-hover.png上

.delegate相当于jQuery 1.4.2中现有的.hover方法

我有一个使用.hover方法绑定到hover事件的事件处理程序,如下所示: $(“.nav li”).hover(function () { $(this).addClass(“hover”); }, function () { $(this).removeClass(“hover”); }); 需要注意的是,我需要处理程序中的两个函数来确保同步。 是否可以使用.delegate重写该函数,因为以下不起作用? $(“.nav”).delegate(“li”, “hover”, function () { $(this).addClass(“hover”); }, function () { $(this).removeClass(“hover”); }); 丰富

Jquery图像淡出

我正在使用这个jquery尝试淡出我的图像并显示下面的内容。 除非您将鼠标hover在它上面,否则它的工作方式非常完美。 然后它吓坏了,开始一次又一次地进出。 我可以做些什么吗? $(‘#contentPosters li’).hover(function(){ $(this).find(‘img’).fadeOut(); }, function(){ $(this).find(‘img’).fadeIn(); });

hover多个实例div时的独特声音

我正在尝试播放一个独特的声音,因为我将一个div元素hover在某个类( .trigger )上。 我的问题是,我有这个div类的多个实例,这意味着无论我hover哪个div,都会播放(相同)声音。 我的dreamcenario将是,只要下一个div徘徊(并希望下一个声音播放),任何先前的声音停止(我使用1-2秒长的声音文件)。 我已经通过html5将我的音频包含在div中我试图用作触发器。 我正在使用这个脚本: $(“.trigger”) $(this).each(function(i) { if (i != 0) { $(“#sound”) .clone() .attr(“id”, “sound” + i) .appendTo($(this).parent()); } $(this).data(“cnt”, i); }) $(this).mouseenter(function() { $(“#sound” + $(this).data(“cnt”))[0].play(); }); $(“#sound”).attr(“id”, “sound0”); 我会因为任何帮助和更好的想法来实现这一点而感恩:我是一个可怕的新手 – 对不起。