javascript - 鼠标输入时的 Javascript 文本

Question

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

我的两个想法：

• 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 的工作，第一个包括应该合并这两个想法的内容。一旦上面的图片工作，我就会知道如何做剩下的。

Answer 1

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

• 未添加 jQuery

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

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

• CSS 也指的是 ul li

  #test ul li div
  

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

见小提琴