JQuery mouseover/mouseout功能 - 更好的代碼？

有沒有更好的方法來編寫下面的代碼？JQuery mouseover/mouseout功能 - 更好的代碼？

我使用的是Aloha編輯器，在我的jQuery中，任何具有可編輯類的元素都會在mouseover上獲得一個3px的虛線邊框，下面的代碼工作正常，我只是想知道是否存在「最佳實踐或者更好的辦法」來寫這樣的代碼：

$(function(){ 
    $('[class^="editable"]').mouseover(function(){ 
     $(this).css('border','3px dashed #a7a7a7'); 
    }); 
    $('[class^="editable"]').mouseout(function(){ 
     $(this).css('border','0px dashed #ffffff'); 
    }); 
});

來源

2013-08-27 Michel

爲什麼你不能使用CSS：懸停選擇？ – Rebelek

如果您仍然希望爲此使用jQuery，那麼您可以使用'.hover'事件。它有兩個參數函數，一個是光標在元素上方，另一個是光標離開時。 http://api.jquery.com/hover/ –

謝謝你們，我不知道這個功能，我很欣賞 – Michel

避免鏈接的方法調用$()用相同的選擇兩次：

$('[class^="editable"]').mouseover(function(){ 
    $(this).css('border','3px dashed #a7a7a7'); 
}).mouseout(function(){ 
    $(this).css('border','0px dashed #ffffff'); 
});

而不是添加特定的CSS樣式表添加這些設置，一個類，然後添加和r EMOVE類：

$('[class^="editable"]').mouseover(function(){ 
    $(this).addClass('hovered'); 
}).mouseout(function(){ 
    $(this).removeClass('hovered'); 
});

（...其中該元素的默認樣式將被定義爲每什麼你在鼠標移出設定。）

來源

2013-08-27 10:55:37 nnnnnn

智能答案，你將代碼和樣式保存在它們所屬的文件中。 – JonathanRomer

謝謝@JonathanRomer。當然，您可以按照Blender的回答在樣式表中完成所有操作，儘管這不適用於舊IE中的所有元素類型（假設任何人仍然關心IE6）。 – nnnnnn

是否因爲在樣式表中添加類然後在jQuery中調用它更乾淨？ – Michel

我會用CSS做：

[class^="editable"]:hover { 
    border: 3px dashed #a7a7a7; 
}

來源

2013-08-27 10:56:38 Blender

使用

hover，它允許用戶指定所述第二函數作爲參數，因此不再次選擇元件：

$('[class^="editable"]').hover(function(){ 
    $(this).css('border','3px dashed #a7a7a7'); 
}, function() { 
    $(this).css('border','0px dashed #ffffff'); 
});

來源

2013-08-27 10:57:31 mattytommo

謝謝，這真的很好:) – Michel

最好的方式是CSS，因爲它更快速和更關注樣式和腳本的分離，js也在消耗你的資源。但是，如果你需要支持IE6或降低您不能使用：懸停:)

.editable 
{ 
    border: 0px dashed #fff; 
} 

.editable:hover 
{ 
    border: 3px dashed #a7a7a7; 
}

來源

2013-08-27 11:05:55 TheCodeDestroyer

JQuery mouseover/mouseout功能 - 更好的代碼？

回答

相關問題