[thelist] popup div's

[Brian Cummiskey]

Hi all,

I'm trying to make a "preview->full details" hover div pop.


I'm having massive problems with getting this to work reliably.   I've 
tried both pure css, pure JS, and a combination of both to no avail 
cross browser.



The pseudo-markup is pretty simple:

<% while have results %>

<div position:relative; float:left; width: 200px;>
	<div position:absolute; display:none;>
		<h2>DETAILED POPUP</h2>
		<img />
		<ul> <li>specs</li></ul>
	</div>

	<h2>title of block</h2>
	<img />
	<input radio />Use This One
</div>

<% loop %>


I first tried wrapping the h2 and image of the main block in a simple 
<a> and used the a:hover div set to display block of the absolute image.

<div position:relative; float:left; width: 200px;>
	<a href="#">
	<div position:absolute; display:none;>
		<h2>DETAILED POPUP</h2>
		<img />
		<ul> <li>specs</li></ul>
	</div>

	<h2>title of block</h2>
	<img /></a>
	<input radio />Use This One
</div>

But, the browsers don't like the invalid code and the <a> can't take the 
block elements correctly.



Then, i moved it to each element separately:

<div position:relative; float:left; width: 200px;>
	<div position:absolute; display:none;>
		<h2>DETAILED POPUP</h2>
		<img />
		<ul> <li>specs</li></ul>
	</div>

	<h2><a href="#">title of block</a></h2>
	<a href="#"><img /></a>
	<input radio />Use This One
</div>


This way, i lose my child selector...
div a:hover div
no longer exists, so i couldn't set it to display:block; to show.


Using onmouseover and onmouseout separately on the h2 and the image 
produced rapid flashing on/off.  I couldn't get the popup to just stay 
up, even being VERY quick with my mouse.


Everything i'm googling is from 2005 or older, so surely something 
better has been thought of since then.  Most reference using the 
hover.htc file which i don't wish to employ.


Anyone have any suggestions?

I'm open to anything--  JS, CSS, jQuery, etc etc.