關于用hover()
<!DOCTYPE html>
<html>
<head>
? ? <script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script> ? ? ? ?
</head>
<body>
? ? <div id="content">
? ? ? ? <ul>
? ? ? ? ? ? <li>語文</li>
? ? ? ? ? ? <li>數(shù)學</li>
? ? ? ? ? ? <li>英語</li>
? ? ? ? ? ? <li>物理</li>
? ? ? ? ? ? <li>化學</li>
? ? ? ? ? ? <li>生物</li>
? ? ? ? </ul>
? ? </div>
? ? <script type="text/javascript">
? ? ? ?(function($){
? ? ? ? ? $.extend({
? ? ? ? ? ? ? "liFocus":function(myli){
? ? ? ? ? ? ? ? ? myli.css("background-color","#ccc");
? ? ? ? ? ? ? }, ? ? ? ? ? ? ?
? ? ? ? ? ? ? "liBlur":function(myli){
? ? ? ? ? ? ? ? ? myli.css("background-color","#fff");
? ? ? ? ? ? ? }
? ? ? ? ? }); ? ?
? ? ? ?})(jQuery);
? ? ? ?
? ? ? ?$(function(){
? ? ? ? ? ?$("li").hover(
? ? ? ? ? ? ? ?$.liFocus($(this)),
? ? ? ? ? ? ? ?$.liBlur($(this))
? ? ? ? ? ?)
? ? ? ?});
? ? </script>
</body>
</html>
為什么實現(xiàn)不了這效果
2016-04-06
??$(function(){
? ? ? ? ? ?$("li").hover(
? ? ? ? ? ? ? ?$.liFocus($(this)),
? ? ? ? ? ? ? ?$.liBlur($(this))
? ? ? ? ? ?)
? ? ? ?});
每個li元素在hover的時候都執(zhí)行了，你自己擴展jquery寫的兩個函數(shù)，就是liFocus和liBlur，先執(zhí)行l(wèi)iFocus，在執(zhí)行l(wèi)iBlur，所以每次hover的時候最終顯示的都是liBlur設置的背景顏色，看起來就沒效果了。應該對li元素單獨設置鼠標進入mousein和鼠標離開mouseout兩種事件，分別執(zhí)行l(wèi)iFocus和liBlur
2016-04-06
(function($){
? ? ? ? ? $.extend({
? ? ? ? ? ? ? "liFocus":function(myli){
? ? ? ? ? ? ? ? ? myli.css("background-color","#ccc");
? ? ? ? ? ? ? }, ? ? ? ? ? ? ?
? ? ? ? ? ? ? "liBlur":function(myli){
? ? ? ? ? ? ? ? ? myli.css("background-color","#fff");
? ? ? ? ? ? ? }
? ? ? ? ? }); ? ?
? ? ? ?})(jQuery); ?這里myli是代表一個li的對象吧，所以$.liFocus($(this));的$(this)要是一個li對象，而hover的時候$(this)是代表一個數(shù)組，應該是bind的方法底層幫我們遍歷了，而hover并沒有幫我們遍歷