我正在研究一种网格样式的布局,以在我的网站上推广产品。我有两个不同的想法,但我无法将这些想法合并到一个代码中。这个想法是让不同尺寸的图像被黑色背景覆盖,白色字母(产品名称)在鼠标悬停时会淡入。
我的两个想法:
-
$('ul li').mouseenter(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeIn();}).mouseleave(function(){ var image= $(this).find('img'), caption = $(this).find('div'); caption.width(image.width()); caption.height(image.height()); caption.fadeOut();
});
我把我弄得一团糟的东西清理干净了,几乎回到了原来的草稿。第二个链接包括 JavaScript 的工作,第一个包括应该合并这两个想法的内容。一旦上面的图片工作,我就会知道如何做剩下的。