Hi
I was wondering if it's posible not to display a DIV (and everything in it), until you hover above it.
Let's say I have this div:
.box {
width: 100%;
height: 100px;
}
What should I add to have result?
Thanks in advance
Jelle
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
div visible when hovering above it
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; }
div visible when hovering above it
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
div visible when hovering above it
is if its display: none (or visibility: hidden) there is nothing to hover over.
:oops: naturally

div visible when hovering above it
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.
div visible when hovering above it
sweet, thanks for clearing that up chris
div visible when hovering above it
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
div visible when hovering above it
.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>
div visible when hovering above it
.wrap isn't a magic css word, it means an element with a class of "wrap".
Oops, now I understand

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?
div visible when hovering above it
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.
div visible when hovering above it
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
div visible when hovering above it
From the site:
NOTE 1: The rules for HTCs have changed a bit in Windows XP SP2. Users with SP2 installed may not see it working correctly, because webservers have to send htc files with the mime-type set to text/x-component. For more info on this, chec
Don't know if that is the problem but I would stop linking directly to his file
div visible when hovering above it
Nothing seems to work, thats a real pity (damn you IE )
Check yourself here:
http://jellebullaert.be/problem/visible2.htm
Thanks anyway!
div visible when hovering above it
behavior:url("csshover.hta");
shouldn't that read:
behavior:url("csshover.htc");
div visible when hovering above it
oh, true. I tried so many things you see
Changed it, but it did'nt work either
div visible when hovering above it
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.
div visible when hovering above it
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
div visible when hovering above it
Give .wrap layout.
e.g.
.wrap { width: 100%;}
or
* html .wrap {height: 1px;}
or
* html .wrap {zoom: 1;}
div visible when hovering above it
OH MY...
That worked
I was just trying to fix it on a rubbish way
Thanks all!!