Stylesheets - Visualize on hover

Author

Visualize on hover

Sander Tekelenburg

2004-11-27, 4:15 am

Trying to make some images disappear on hover (works), and others appear
on hover (works not).

In tested browsers[*], this gives the expected result:
IMG.disappear {visibility: visible}
IMG.disappear:hover {visibility: hidden}

this does not:
IMG.appear {visibility: hidden}
IMG.appear:hover {visibility: visible}

The image is hidden but does not appear on hover.

Utterly unimportant of course, but frustrating enough to ask if I'm
doing something wrong. Would the logic be that one cannot hover over a
hidden image? I can see that for display:none, but not for
visibility:hidden.

Test-case at <http://santek.no-ip.org/~st/tests/CSS/visibility.html>

[*] Mozilla 1.7, Safari, Opera 7.5.4

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>

Lauri Raittila

2004-11-27, 12:17 pm

in comp.infosystems.www.authoring.stylesheets, Sander Tekelenburg wrote:
> Trying to make some images disappear on hover (works), and others appear
> on hover (works not).

> IMG.appear:hover {visibility: visible}
>
> The image is hidden but does not appear on hover.
>
> Utterly unimportant of course, but frustrating enough to ask if I'm
> doing something wrong. Would the logic be that one cannot hover over a
> hidden image? I can see that for display:none, but not for
> visibility:hidden.

Don't know. Try wrapping image to div or span and say
div img.appear:hover {...}

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

vatore

2004-11-27, 7:16 pm

Uzytkownik "Lauri Raittila" <lauri@raittila.cjb.net> napisal w wiadomosci
news:MPG.1c1281904ebfbe1598a1db@news.individual.net...
> in comp.infosystems.www.authoring.stylesheets, Sander Tekelenburg wrote:
>
>
> Don't know. Try wrapping image to div or span and say
> div img.appear:hover {...}
>

I think
div.wrapper img { ... }
div.wrapper:hover img { ... }
should work

--
pawel[dot]knapik[at]gmail[dot]com
www.csslayouts.net //version beta

Lauri Raittila

2004-11-27, 7:16 pm

in comp.infosystems.www.authoring.stylesheets, vatore wrote:
>
> Uzytkownik "Lauri Raittila" <lauri@raittila.cjb.net> napisal w wiadomosci
[color=darkred]
> I think
> div.wrapper img { ... }
> div.wrapper:hover img { ... }
> should work

Yes, that was what I meaned...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Roland Eriksson

2004-11-29, 4:16 am

On Mon, 29 Nov 2004 02:04:37 +0100, Sander Tekelenburg
<user@domain.invalid> wrote:

>In article <coappl$3q5$1@achot.icm.edu.pl>, "vatore" <vatore@wp.pl>
>wrote:
[color=darkred]
>I agree it should, as should IMG.appear:hover. Neither do though.
>Suggestion included in test-case:
><http://santek.no-ip.org/~st/tests/CSS/visibility.html>

Hmm... interesting (although the :hover hiding procedure is "shaky" to
say the least, as seen in Firefox).

And what kind of browser support could we find for this if an 'A'
element is used as a wrapper instead of a 'DIV' ?

--
Rex