Wordpress: On hover load title of post into a specific DIV - php

Question

I'm currently working on a wordpress template where the title of a post is hidden and on hovering the post, it should be displayed on the bottom of the browser. To simplify, the post has this structure:
<article class="post">
<header class="article-header">
<h2 class="entry-title">
Post Title
</h2>
</header>
<section class="entry-content">
Post Content
</section>
</article>
Basically, I'd like to have a fixed in the body, that sits on the bottom of the browser and when a post is hovered, the content of its child element is passed into the . My approach so far was to have all elements constantly fixed to the browser bottom (hidden) and on a hover, each of them will be display. That led to a couple of problems and I thought I'd might be easier to have one empty div, which just grabs the title information.
Can anyone help me with that, maybe with jQuery or php?
Thanks!

Answer 1

you mean, something like this? http://jsfiddle.net/rKhqT/5/
HTML:
<article class="post">
<header class="article-header">
<h2 class="entry-title">
Post Title
</h2>
</header>
<section class="entry-content">
Post Content
</section>
</article>
<footer></footer>
CSS:
html, body {
margin: 0;
height: 100%;
}
.entry-title {
display: none;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
height: 30px;
border: 1px solid black;
}
JS (requires jQuery) :
$(document).ready(function() {
$('article.post').mouseover(function() {
$('footer').text($(this).find('h2').text());
});
$('article.post').mouseout(function() {
$('footer').text('');
});
});