CSS 'visibility' problem - help apprecated!

  peabody 12:17 27 Oct 2006
Locked

Could somebody kindly have a look at the appended code and perhaps see why it fails to work? I'm trying to get a hidden conatainer of text to appear 'onmouseover' of a visible container. I fear the book I am following may be a bit out of date (2002). Anyway here's the code and thanks:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>Untitled Document /title>
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
/head>
P STYLE="width: 50%; padding: 5px; position: absolute;
top: 250px; left: 25px; border: 1px solid; background-color: #ffffcc;">
a href="#"OnMouseOver="document.all.hidden.style.visibility:"visible";">
This is some text in a container. When the mouse scrolls over this box I want another container,
invisible upon loading the page, to become visible /a> /P>
P STYLE="ID: hidden; visibility: hidden; width: 50%; padding: 5px; position: absolute;
top: 150px; left: 100px; border: 1px solid; background-color: #ffffcc;">
This is text in the container that is hidden but will become visible when the mouse
is scrolled over the visible container.
/p>
/body>
/html>

  harristweed 12:56 27 Oct 2006
  peabody 13:18 27 Oct 2006

So it does! I'll have a play. Nice to hear from you again - hope all is well.

  PurplePenny 01:16 28 Oct 2006

One word of warning about the CSS alert box: it only works with hover (mouse over) so anyone using keyboard navigation will never see it.

(The same is true of the first example too: you would need an OnFocus event to make it work with a keyboard.)

  peabody 21:05 29 Oct 2006

... why doesn't my code work??? :(

  PurplePenny 22:08 29 Oct 2006

P STYLE="ID: hidden;

"ID:hidden;" isn't part of a style. Should that be
P ID="hidden" STYLE="visibility: hidden; ..."?

  peabody 16:49 30 Oct 2006

I tried a few permutations but no go. Not to worry - let's not spend any more time on it. Thanks all.

  PurplePenny 23:37 30 Oct 2006

Go to the publisher's web site. If there is a typo in the code there may be a correction online.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

This is what design agencies will look like in 2032

How to update iOS on iPhone or iPad

WhatsApp : comment lire vos messages sans que l’expéditeur le sache