Javascript Text On Mouse Enter

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/는 거의 원래 초안 ... 두 번째 링크가 작동 자바 스크립트를 포함하고, 첫 번째는 두 개의 아이디어를 통합해야한다 무엇을 포함에, 내가 만든 난장판의 위로를 청소 . 일단 최상위 그림이 작동하면 나머지 작업 방법을 알게 될 것입니다.

Answer 1

작동을 멈추는 바이올린에 다음과 같은 문제점이 있습니다.

• jQuery를 귀하의 마크 업 UL하지 않은 반면, 당신은 JS에 $('ul li')을 언급했다

• 를 추가 할 수 없습니다. 그것은 table이었습니다.

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

• CSS는 UL 리튬에 있도록 마크 업의 요소를 참조하는

  #test ul li div 
  

변경을 언급했다.

fiddle