Mouseover/mouseout +：不是jQuery的问题

我想做一个简单的内容滑动thingy和卡住写代码可能是最简单的东西 - 处理悬停滑块的导航部分。我希望它是这样的，当一个具有幻灯片信息的div被点击时，悬停不起作用，但适用于其他两个div。Mouseover/mouseout +：不是jQuery的问题

我已经尝试过类和id的点击div，但没有任何作品，当我到达悬停部分。我试图使用：不过滤选择其他两个div，或全部三个未被#clicked的。但是没有太多的选择 - 无论如何，悬停适用于所有三个div。我尝试过使用：而不是像hide（）这样的其他函数，它工作得很好。那么这是一个CSS特殊问题？或者是mouseover/mouseout有问题？或者对我来说，就像是一个无能的傻瓜？

这里是我的html：

<div id="linkswrapper"> 
    <div> 
    <a>Slide 1</a> 
    <p>Slide info 1.</p> 
    </div> 
    <div> 
    <a>Slide 2</a><p>Slide info 2.</p> 
    </div> 
    <div> 
    <a>Slide 3</a> 
    <p>Slide 3 info.</p> 
    </div> 
</div>

这里是jQuery代码：

// adds href="#" to all links in "linkswrapper" div 
$("#linkswrapper div a").attr({href: "#"}); 

// this handles clicks on the divs. When clicked, the div is assigned 
// "clicked" id, and the id attribute is removed from the other sibling divs 
$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
}); 

// handling the mouseover/mouseout. Hover should be working on all the three divs 
// if neither of them has been clicked on or only on the two other divs if one 
// of the three has been clicked on 
$("#linkswrapper div:not(#clicked)").mouseover(function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).mouseout(function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
});

来源

2010-07-24 Johnatan

在页面加载时，并按照元素的当前状态分配事件被分配相比，提供选择器。

因此，处理程序被分配给所有人，因为他们都没有#clicked ID。处理程序保持放置状态，除非您将其移除。

另一种方法是使用.live()或.delegate()，以便在发生事件时动态地考虑选择器。

试试看：http://jsfiddle.net/neGgz/

$("#linkswrapper div:not(#clicked)").live('mouseover', function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).live('mouseout', function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
});

http://api.jquery.com/live/

另一种方法：

http://api.jquery.com/delegate/

编辑：

或者你可以使用hover事件与.live()：

试试看：http://jsfiddle.net/neGgz/1/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    if(e.type == 'mouseover') { 
     $("a", this).css("border-color","#0066FF"); 
     $("p", this).css("color","#0066FF"); 
    } else { 
     $("a", this).css("border-color","#e3e3e3"); 
     $("p", this).css("color","#cccccc"); 
    } 
});

编辑：

或者这里是使用类一个不错的短版：

试试看：http://jsfiddle.net/neGgz/2/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    $("a,p", this).toggleClass('hovering'); 
});

来源

2010-07-24 17:16:42 user113716

代替.mouseover()和.mouseout()你要使用mouseneter和mouseleave与.delegate()这里，像这样：

$("#linkswrapper").delegate("div:not(#clicked)", "mouseenter", function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).delegate("div:not(#clicked)", "mouseleave", function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
});

那么问题是这样的选择：$("#linkswrapper div:not(#clicked)")找到所有<div>在#linkswrapper不在id="clicked"当时，如果ID来，后来去，不影响鼠标事件已绑定事实到更早的元素（不是选择器）。使用.delegate()监听事件冒泡并在事件发生时检查选择器，因此如果元素当前具有该ID，则区分它。

的mouseover到mouseenter和mouseout到mouseleave变化是因为进入/离开一个孩子为好，这你通常不想在前者的事件会发生。

作为一个侧面说明，这可以是简单为好，没有必要为.each()：

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
});

像这样：

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).removeAttr("id"); 
});

You can try both improvements in a demo here :)

来源

2010-07-24 17:17:10

Mouseover/mouseout +：不是jQuery的问题

回答

相关问题