Question

我正在进行网格式布局，以便在我的网站上推广产品。我有两个不同的想法，但我无法将这些想法合并为一个代码。我们的想法是用黑色背景覆盖不同大小的图像，白色字母（产品名称）将在鼠标悬停时淡入。

我的想法都是：

$('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工作，第一个包括应该合并的两个想法。一旦顶部图片工作，我将知道如何做其余的事情。

Answer 1

小提琴中存在以下问题，导致其停止工作。

未添加jQuery
您在js中引用$('ul li')，而您的标记没有ul。它有table。
```
$('ul li').mouseenter(function(){
```
CSS也指的是ul li
```
#test ul li div
```

更改它以便引用标记中的元素。

请参阅fiddle

鼠标输入的Javascript文本

1 个答案: