Javascript-在悬停时加载div和内容

Question

I got a little problem. I have to load content in a div, when the user hover over a div.

<div id="table">
<div class="hoverover">
    <!--<img src="ImageLink">-->
    Image goes here.
</div>
</div>

The div "table" is where the users mouse have to be to show the second div. The div "hoverover" must only be loaded if the users mouse is in the div "table". So any pictures in the div "hoverover" is not loaded before the users mouse is in "table".

I have been looking at this, but it's not what I was searing for. jsfiddle.net/LD8t6/ and this http://jsfiddle.net/ujBZY/9/ (Am I stupid or.. since I can not get this to work?)

I have made a fiddle of my progress here: http://jsfiddle.net/Zwipper/xCmxj/

If I have overlooked a thread on this topic, I am sorry. I may have seen me blind to this in my search.

I have a little problem to get a javascript to load the div "hoverover" properly. Can any of you get a javascript to work? It will be a great help :)

I hope this is enough info, this is my first fiddle. If not, please write :)

Thanks :)

Answer 1

Try this: DEMO HERE

$('#table').hover(
    function(){$('div.hoverover').show('slow'); },

    function(){$('div.hoverover').hide('slow');}
);

Answer 2

I have found a solution with some ajax. This is what I have found:

  <a href="#" class="ajaxtrigger">Load Ajax</a>
    <div id="target"></div>

<script src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
    $(function(){
   $(".ajaxtrigger").click(function(){

      $("#target").load("load.php #toggle3");   
   });
})
</script>

This is the load.php:

<?
echo '<div id="#toggle">Toggle 1</div>';
echo '<div id="#toggle2">Toggle 2</div>';
echo '<div id="#toggle3">Toggle 3</div>';
echo '<div id="#toggle4">Toggle 4</div>';
?>

This works when I have the files on me laptop and xampp :)