Hover + Show and Hide not working

[Keysle]

http://k8r.us/test contains my display. I'm trying to get it so that the the ".postBar" hides when the mouse hovers out and shows when the mouse hovers in.

The red box is the portion hat is suppose to activate the hover. The white box inside+the "59 minutes ago" is the portion that is suppose to go away.

It doesn't work

[MartinRinehart]

Try this technique:


<tag id='hover_trigger'> ...

(Any HTML tag is OK. span, div, h1, h2, p, ul, li, ...)

To use the trigger:


<script type='text/JavaScript'>
var trigger = document.getElementById( 'hover_trigger' ); // grab it
trigger.onmouseover = hover_func; // no parens!

function hover_func() {
alert( 'in hover_func()' );
}

When that works, hovering over the trigger (a div, a span, a whatever you want) will get your alert. Then replace your alert with the code you want to execute and test again.

Here are the things to remember (which probably contradict what you've read):

1) Do not assign "onclick" in the markup. Assign it in the JS. (This is the only way to be sure your code works in all browsers.)

2) Do not assign a string to the onclick. Assign a function.

3) When you assign a function, do not use parens! "my_func" is a reference to a function. "my_func()" executes and returns the results of the function.

If your function displays previously hidden content, you'll need an "onmouseout" companion to hide the content. Use the same technique.