Javascript Text On Mouse Введите

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 не был добавлен

• Вы имели в виду $('ul li') в JS, тогда как разметка не было, ул. Это было table.

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

• CSS, также имел в виду уль Li

  #test ul li div 
  

изменение, которое таким образом, что она относится к элементам в разметке.

fiddle