एक छवि को दूसरे मेनू में फीका करें - सीएसएस-ट्रिक्स

एक सीएसएस स्प्राइट छवि बनाएं, जिसमें शीर्ष आधा और निचला आधा दो चित्र हैं जिनके बीच आप चेतन करना चाहते हैं। JQuery एक टैग जोड़ता है, और स्प्राइट छवि के निचले आधे हिस्से को इसकी पृष्ठभूमि के रूप में जोड़ता है। जैसा कि आप पर और बंद होवर करते हैं, स्पैन पूरी तरह से पारदर्शी और पूरी तरह से अपारदर्शी के बीच एक दूसरे में एक छवि को लुप्त करती है।

HTML:

home
about
services
contact

सीएसएस:

ul#menu li a(float:left;display:block;background:url("images/menu.png.webp") no-repeat;width:150px;text-indent:-9999px;height:50px) ul#menu li#home a(background-position:0px 0px) ul#menu li#about a(background-position:-150px 0px) ul#menu li#services a(background-position:-300px 0px) ul#menu li#contact a(background-position:-450px 0px) ul#menu li a span (background:url("images/menu.png.webp");height:50px;display:block) ul#menu li#home a span(background-position:0px -50px) ul#menu li#about a span(background-position:-150px -50px) ul#menu li#services a span(background-position:-300px -50px) ul#menu li#contact a span(background-position:-450px -50px)

jQuery:

$(function() ( $("ul#menu li a").wrapInner(""); $("ul#menu li a span").css(("opacity" : 0)); $("ul#menu li a").hover(function()( $(this).children("span").animate(("opacity" : 1), 400); ), function()( $(this).children("span").animate(("opacity" : 0), 400); )); ));