Search code examples
javascripthtmltextmouseleavemouseenter

Javascript Text On Mouse Enter

I'm working on a sort-of-grid-style layout to promote products on my website. I have two different ideas, but I haven't been able to merge those ideas into one single code. The idea is to have images of different sizes covered by a black background with white letters (name of the product) that will fade-in when hovered by the mouse.

Both my ideas:

  • 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/

I cleaned it up of the mess I made, almost back to the original draft.. The second link includes the JavaScript working, and the first includes what should be the two ideas merged. Once the top picture works, I'll know how to do the rest.

Solution

  • You had the following problems in the fiddle which was stopping it to work.

    • jQuery was not added

    • You were referring $('ul li') in js whereas your markup didn't have ul. It had table. 

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

    • CSS also was referring to ul li

      #test ul li div

    Change that so that it refers to the elements in the markup.

    See fiddle