Căn bản là cái này mới nhìn người ta làm qua video với tuts, chưa tự làm bao giờ (mình toàn thế
) nên hôm qua có người hỏi cách làm = css, mình cũng thử làm xem sao
Xem nào, lý thuyết thì là mỗi dòng là 1 ul, mỗi cột là 1 li, các li ở cùng 1 cột thì có chung 1 class. Yêu cầu đổi màu giữa các dòng nữa
. Đổi màu thì dòng nào màu nào cho class màu đấy là được :p .
Làm xong rồi, đến yêu cầu khi rê chuột vào các dòng thì phải đổi màu nền dòng đấy. Tưởng ngon ăn, cứ cho :hover vào rồi background là xong, ai ngờ không tài nào được
. Chỉ set đc color chứ ko set đc background, ko hiểu sao nữa
Thử động đến jQuery 8-> cái này mình cũng mới chỉ nhìn chứ chưa làm bao giờ
. Lúc đầu cũng $(”ul”).hover() function nọ kia, cũng mãi mà ko được, nghĩ lại lúc trước chỉ dùng css, thì ul li:hover lại set được background, mình nghĩ là phải set cho tất cả các li của ul thì có lẽ mới được. Thế nên giờ đi xem docs của jQuery, xem có cái selector nào như vậy ko. Dùng $(this > “li”) ko được (ko biết mình dùng có đúng ko=.=), chuyển sang kiểu: khi ul được hover thì làm những việc là: addClass(”hover”), giờ những ul nào có class là hover thì mình sẽ add css cho nó là css(”backgroud”,”màu gì đó”). Kết quả là được rồi
Còn phần khi di chuột ra khỏi ul đấy nữa, vì hàm hover có 2 đối số, over và out. Giờ khi out thì mình removeClass(”hover”) là 1, sau đó thì “trả lại tên cho em”, các dòng có màu nào với class nào thì set css về màu tuơng ứng
Cả đoạn nói dài dòng nhưng code chỉ có tưng đây
$(document).ready(function() {
$(”ul”).hover(
function() {
$(this).addClass(”hover”);
$(”ul.hover li”).css(”background”,”#000″);
},
function() {
$(this).removeClass(”hover”);
$(”ul.xanh li”).css(”background”,”#C4D6FF”);
$(”ul.trang li”).css(”background”,”#FFF”);
$(”ul#header li”).css(”background”,”#CCC”);
}
);
});
Demo: http://b35cnn.net/demos/doimau.html
Căn bản lâu lắm rồi mới tự làm đc cái gì đấy ntnày
, cảm giác như hồi mình còn ngồi mày mò nghịch cái forum IPB 8-> nên mới post bài làm kỷ niệm
Ko biết còn cách nào nữa ko nhỉ
Edit: Thực ra là có cách nữa đơn giản hơn nhiều
, gà như mình nên làm nó mới lòng vòng thế này>”<
Chỉ cần addClass(”xanh”) và removeClass(”xanh”) khi hover lên ul là được
, thế mà ko nghĩ ra =.=, giờ mới biết cái kiểu làm việc này :-B
Cái này có vẻ chính xác hơn vì khi di chuột vào caption nó cũng ko đổi màu, và vì mình add class “den” mà trong phần css cái class den lại ở trước id header cho nên nó ko đổi màu :-B
Demo: http://b35cnn.net/demos/doimau2.html