div visible when hovering above it

It is; you would basically set out the div with it's properties but set to display:none then you would show the box on hover .box:hover{display:block;} problem with this is that IE does not understand the pseudo class :hover on anything but anchors so you will need a snippet of javascript or the csshover.htc file:
http://www.as3265.net/~peterned/csshover.html for this to work in IE

This basic principle is the means by which the CSS drop down menus work
Hugo

Only problem, is if its display: none (or visibility: hidden) there is nothing to hover over. Put the hover on a container.

.box { display: none;}
.wrap:hover .box {display: block; }

well, can't you just use visibility:hidden, since it is still 'there', or is that wrong. in my experience, space is still reserved when you set the visibility, though i have never tried to use a mouseover on it when it is hidden

Yep, you can use visibility: hidden, I think I mentioned that as an alternative . To be clear...

.box { visibility: hidden; }
.wrap:hover .box {visbility: visible; }

And no, a non-visible element won't trigger a :hover style or a mouseover event.

sweet, thanks for clearing that up chris

Interesting...
But I can't get it to work :oops:

This is what I've got:
http://users.skynet.be/tunnel/andere/problem/visible.htm

.wrap isn't a magic css word, it means an element with a class of "wrap". You could choose any arbitrary name as long as its visible and you can identify it in your style rule.

e.g. you must add the wrap element.

<div class="wrap">
  <div class="box"> ... </div>
</div>

Didn't know you could do that so easely. And it works in "non-IE browsers". But how can you fix the IE bug?

I've looked at the site Hugo gave me
* http://www.as3265.net/~peterned/csshover.html

but what's next? They use a .htc file in their example to fix the bug in IE:
* http://www.as3265.net/~peterned/htc/csshover.htc

Here is the example:
* http://www.as3265.net/~peterned/examples/cssmenu.html
Do I just need to copy the script and add it in my CSS, like I did here:
* http://users.skynet.be/tunnel/andere/problem/visible2.htm

Or do you have to make a script yourself?

Firstly it's not a bug, IE in their infinite wisdom decided that we wouldn't need to have :hover on anything but anchors .

With the csshover.file you just save the file you don't need to write it all the instructions for it's use should be on the page.

Go to the second link you posted and just do a 'save page as'

it shows you the css rule to use in the notes at the top:

howto: body { behavior:url("csshover.htc"); }

loose the howto and include in your stylesheet or in style tags use MS conditional comments if you're worried about CSS validation.

Hugo.

Yes, i tried that myself, like you can see here:
* http://users.skynet.be/tunnel/andere/problem/visible2.htm
(I linked directly to the original .htc file on the site because I have some upload problems)

But it doesn't work on my PC, even when saved the file. Where is the error?

Jelle

From the site:

Don't know if that is the problem but I would stop linking directly to his file

Nothing seems to work, thats a real pity (damn you IE )

Check yourself here:
http://jellebullaert.be/problem/visible2.htm

Thanks anyway!

behavior:url("csshover.hta");

shouldn't that read:

behavior:url("csshover.htc");

oh, true. I tried so many things you see

Changed it, but it did'nt work either

Is your server configured to deliver the correct mime type for the file? as I mentioned earlier.

Just in case try changing the .wrap:hover to div.wrap:hover

Hugo.

Nothing seems to work. I changed it and tried it on 2 servers:
http://users.skynet.be/tunnel/andere/problem/visible2.htm
http://jellebullaert.be/problem/visible2.htm

Guess there is no solution for it But i'll keep looking

Give .wrap layout.

e.g.

.wrap { width: 100%;}
or
* html .wrap {height: 1px;}
or
* html .wrap {zoom: 1;}

OH MY...
That worked
I was just trying to fix it on a rubbish way

Thanks all!!