19 replies [Last post]
j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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; }

airswit
airswit's picture
Offline
Enthusiast
California
Last seen: 35 weeks 3 days ago
California
Timezone: GMT-7
Joined: 2006-01-07
Posts: 124
Points: 9

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

div visible when hovering above it

Quote:
is if its display: none (or visibility: hidden) there is nothing to hover over.

:oops: naturally Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

div visible when hovering above it

airswit wrote:
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 Wink. 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.

airswit
airswit's picture
Offline
Enthusiast
California
Last seen: 35 weeks 3 days ago
California
Timezone: GMT-7
Joined: 2006-01-07
Posts: 124
Points: 9

div visible when hovering above it

sweet, thanks for clearing that up chris

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

div visible when hovering above it

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

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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>

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

div visible when hovering above it

Chris..S wrote:
.wrap isn't a magic css word, it means an element with a class of "wrap".

Oops, now I understand Laughing out loud

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

div visible when hovering above it

From the site:

Quote:
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 Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

div visible when hovering above it

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

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

Thanks anyway! Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

div visible when hovering above it

behavior:url("csshover.hta");

shouldn't that read:

behavior:url("csshover.htc");

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

div visible when hovering above it

oh, true. I tried so many things you see Smile

Changed it, but it did'nt work either

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

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 Sad But i'll keep looking

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

div visible when hovering above it

Give .wrap layout.

e.g.

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

j3ll3
Offline
Regular
Last seen: 16 years 41 weeks ago
Joined: 2005-04-13
Posts: 37
Points: 0

div visible when hovering above it

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

Thanks all!!