Jquery hover show div and stay

Question

I'm building a small jquery script that shows a div when you hover over an image (to show technical specifications of a product). My Problem is that when you hover, the new div loads and then it goes away because the mouse is no longer hovering the image but the new div. Any idea how to solve this so it does not blink?

http://jsfiddle.net/uWRLr/

$(document).ready(function(){
    $('.hover').hover(function(){
        $('.techinfo').fadeIn(500)
    },function(){
        $('.techinfo').fadeOut(500)
    })
})

Answer 1

I would wrap everything in a container and attach the hover events to the container instead, something like:

<div class="main-container">
    <img class="hover" src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" />
    <div class="techinfo">Here's the text</div>
</div>

...and your Javascript:

$(document).ready(function(){
    $('.main-container').hover(function(){
        $('.techinfo').fadeIn(500)
    },function(){
        $('.techinfo').fadeOut(500)
    })
});

This way, when you enter / exit the container the functionality is available. Here's a fiddle.

Answer 2

What I would do is put both the image and the technical info in the same div and pin the hover even to the external div.

http://jsfiddle.net/uWRLr/6/

<div class="hover">
    <img src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" />
    <div class="techinfo">Here's the text</div>
</div>

Answer 3

Remove the second function() so it has no exit hover function.

$(document).ready(function(){
    $('.hover').hover(function(){
        $('.techinfo').fadeIn(500)
    })
})

The second function is run whenever you stop hovering the image, so removing it will stop that occurring and the div will stay shown.

EDIT: I didn't fully read the question, Chris Kempen's answer is more inline with what was being asked.