Actually, Jay, the JavaScript is required. The CSS uses a "hover" class
which the JavaScript code applies to the element. "hover" has no intrinsic
meaning here; they could have called it "reveal" and it would work the same,
as long as the JavaScript code uses the same classname.
You're probably thinking of the :hover pseudo-class, as used in an a:hover
selector. They didn't use that approach because it doesn't work in all
browsers - IE supports :hover only on A elements.
See my earlier message for the JavaScript code. I missed one of the CSS
styles, though - thanks for catching that:
.spoiler span {
visibility: hidden;
}
-Mike
> From: Jay Salvat
>
> Hi Stephan,
> I took a look to their css file and html code. They use a
> simple but smart css trick. No javascript needed here.
>
> html
> <span class="spoiler"><span>my spoiler here</span></span>
>
> css
> .spoiler {
> background-image: url(/images/spoilers.gif);
> border: 1px solid red;
> }
> .spoiler span {
> visibility: hidden;
> }
> .spoiler.hover {
> background-image: none;
> border: none;
> }
> .spoiler.hover span {
> visibility: visible;
> }
>
> but if you need a jquery plugin to reproduce the effect it's
> really easy to add the extra inner span and hover event to
> change Classname of it.
> On 29 juil, 12:28, Stephan Beal <[EMAIL PROTECTED]> wrote:
> > Hi, all!
> >
> > i just came across this by accident and thought it might
> > interest some
> > plugin author enough to write a similar feature for jQuery:
> >
> > http://imdb.com/title/tt0084787/faq
> >
> > scroll way down, or search for "Are there any deleted
> > scenes for this
> > movie?", and look for the red text which says "Spoilers!". It is an
> > effect which hides certain text until you mouse over it, at which
> > point the real text is revealed. The intention is to keep people
> > from accidentally seeing text which might spoil a film for them (i.e.
> > reveal more information than they might want to know before
> > seeing the film).
