Dear Experts: I am trying to write a css style that makes text [a]
invisible; [b] visible-when-selected (so that at least a visible block
appears over the selected text---like black foreground over black
background with 50% opacity to make it gray and shine through what is
behind it). Similarly, I want to be able to shows links as blocks
(like red on red with opacity 20%).
I am trying firefox 1.5.0.9 and konqueror 3.5.5. I presume the latter
is so non-compliant that I may as well not bother. Alas, I thought the
former was pretty decent. yet, I can get my text to be invisible, but
it does not become visible when selected. (cursor changes, so I know I
am selecting. I can also change the opacity level to 0.2 to illustrate
this.) I am enclosing a short example.
Is there a standard way to make this work, preferably under both
firefox and IE, at least latest versions? help appreciated. I have
been pulling my hair out for 3 days now trying to make this work.
sincerely, /ivo welch
<html>
<style type="text/css">
a { color:red; background-color:blue; opacity:0.9; }
p.invisible { font-size:18; opacity:0.0; foreground-color:blue;
background-color:white; font-family:arial; }
::-moz-selection { background:red; color:red; opacity:0.5; }
::selection { background:red; color:red; opacity:0.5; }
</style>
<body bgcolor="cyan">
<div style="width:501px; height:203px; background-color:yellow"</div>
<!-- yellow is just an example; this would more usually be a n image
file -->
<p class="invisible" style="position:absolute; top:43px;
left:72px">This is an example of some text</a>
<p class="invisible" style="position:absolute; top:84px;
left:72px">Will <a href="http://www.omnipage.com">Omnipage</aever be
able to parse this?</a>
</body>
</html>
