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的問題

回答

相關問題