Display Image When Hover Over Button

This is my site. What I am trying to do: display an image when user hovers over the links. I am definitely making some stupid mistake but I am not really sure which. This is what I

Solution 1:

You where tying to hover a hidden element. That is why your code was not working. You cannot trigger an event on a hidden element.

$('a').hover(
    function() {
        $('.place-image').fadeIn('slow');
    },function() {
        $('.place-image').fadeOut('slow');
    }
);

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><li><ahref="#">Cork</a><divclass="place-image"><imgsrc="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div></li>

Solution 2:

You need to add hover event to li like following.

$('li').hover(
    function() {
        $(this).find('.place-image').fadeIn('slow');
    }, function() {
        $(this).find('.place-image').fadeOut('slow');
    });

Solution 3:

What I am trying to do display an image when hover over the links.

make it

<li>
  <ahref="#">Cork</a><divclass="place-image"><imgsrc="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div></li>


$('li a').hover(
    function() {
        $(this).next('.place-image img').fadeIn('slow');
    },function() {
        $(this).next('.place-image img').fadeOut('slow');
    }
);

Solution 4:

Issue: you cannot detect a :hover state on an element with display: none

A possible solution might be to hide only the img itself, and listen to the :hover on the wrapper .place-image or on the a or li as you wish. See the demo below:

$('.place-image').hover(
    function() {
        $('img', this).fadeIn('slow');
    },function() {
        $('img', this).fadeOut('slow');
    }
);

.place-image{
    width:326px;
    height:326px;  
}

.place-imageimg {
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><li><ahref="#">Cork</a><divclass="place-image"><imgsrc="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div></li>

Alternative solution

Depending on your circumstances you could achieve this also without js:

.place-image {
    width:326px;
    height:326px;  
}

img {
  opacity: 0;
  transition: opacity .4s ease;
  /*TODO: add crossbrowser prefixes*/
}

li:hoverimg{
  opacity: 1;
}

<ul><li><ahref="#">Cork</a><divclass="place-image"><imgsrc="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div></li></ul>

Solution 5:

You just have to change your Javascript:(In your website ul has class nm use it to target specific li in ul. )

HTML

<li><ahref="#">Cork</a><divclass="place-image"><imgsrc="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div></li>

CSS

.place-image{
    display:none;
}

div.place-image{
width:326px;
height:326px;  
}

javascript

$( "ul.nm > li" ).
   $('li').hover(
      function() {
          $(this).find('.place-image').fadeIn('slow');
        }, function() {
          $(this).find('.place-image').fadeOut('slow');
    });