0

我正在研究一种网格样式的布局，以在我的网站上推广产品。我有两个不同的想法，但我无法将这些想法合并到一个代码中。这个想法是让不同尺寸的图像被黑色背景覆盖，白色字母（产品名称）在鼠标悬停时会淡入。

我的两个想法：

  • http://jsfiddle.net/qrAr7/ 

    $('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();

    });

  • http://jsfiddle.net/yAfLU/

我把我弄得一团糟的东西清理干净了，几乎回到了原来的草稿。第二个链接包括 JavaScript 的工作，第一个包括应该合并这两个想法的内容。一旦上面的图片工作，我就会知道如何做剩下的。

4

1 回答 1

0

您在小提琴中遇到了以下问题，导致它无法正常工作。

  • 未添加 jQuery

  • 您在 js 中引用$('ul li')，而您的标记没有 ul。它有table。

    $('ul li').mouseenter(function(){

  • CSS 也指的是 ul li

    #test ul li div

更改它，使其引用标记中的元素。

见小提琴

于 2013-05-20T16:04:58.390 回答