CODEWITHSUNDEEP
javascriptjquerycss
Nauman Tanwir
Nauman Tanwir

Reputation: 41

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 have done:

HTML

<ul class="nm">
    <li><a href="#">Cork</a>
        <div class="place-image">
          <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
        </div>
    </li>

  .......Remaining  li's.....
</ul>

CSS

.place-image{
    display:none;
}

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

javascript

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

Please help me out.

Upvotes: 1

Views: 5947

Answers (6)

Young
Young

Reputation: 1

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

div.place-image{
width:326px;
height:326px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

Upvotes: 0

Sandeep
Sandeep

Reputation: 1532

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

HTML

<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="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');
    });

Upvotes: 0

Matyas
Matyas

Reputation: 13712

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-image img {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image">
    <img src="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:hover img{
  opacity: 1;
}
<ul>
<li>
  <a href="#">Cork</a>
  <div class="place-image">
    <img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png">
   </div>
</li>
</ul>

Upvotes: 0

Rino Raj
Rino Raj

Reputation: 6264

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;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"></div>
</li>

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

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');
    });

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68443

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

make it

<li>
  <a href="#">Cork</a>
  <div class="place-image"><img src="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');
    }
);

Upvotes: 0

Related Questions