Visualize on hover

Sander Tekelenburg

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

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

Uzytkownik "Lauri Raittila" <la***@raittila.cjb.net> napisal w wiadomosci
news:MP************************@news.individual.ne t...

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 {...}

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

in comp.infosystems.www.authoring.stylesheets, vatore wrote:

Uzytkownik "Lauri Raittila" <la***@raittila.cjb.net> napisal w wiadomosci
Try wrapping image to div or span and say
div img.appear:hover {...}
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>

Sander Tekelenburg

In article <co**********@achot.icm.edu.pl>, "vatore" <va****@wp.pl>
wrote:

[...]

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

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>

Any other suggestions?

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

Roland Eriksson

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

In article <co**********@achot.icm.edu.pl>, "vatore" <va****@wp.pl>
wrote:
I think
div.wrapper img { ... }
div.wrapper:hover img { ... }
should work
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

Sander Tekelenburg

In article <5s********************************@4ax.com>,
Roland Eriksson <jr****@newsguy.com> wrote:

On Mon, 29 Nov 2004 02:04:37 +0100, Sander Tekelenburg
[...]

<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).

Yes. It's shaky in Opera, Safari and MacIE 5.2.3 as well. As if per
pixel the browser recalcultates what it should be doing and in the mean
time reverts to the non-hover display. But I think we can consider this
aspect as merely 'ugly', not as a lack of CSS support.
And what kind of browser support could we find for this if an 'A'
element is used as a wrapper instead of a 'DIV' ?

Added to test-case at:
<http://santek.no-ip.org/~st/tests/CSS/visibility.html>. The only thing
this achieves is that this way now also IE5.2.3 (for Mac OS X) hides the
content on hover.

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

Sander Tekelenburg

In article <us************************@news.euro.net>,
Sander Tekelenburg <us**@domain.invalid> wrote:

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}

In case someone cares, using the image as a background image can give
the wanted effect. See
<http://santek.no-ip.org/~st/tests/CSS/visibility.html>.

Works for me in Mac OS X versions of Mozilla 1.7, Opera 7.5.4, iCab 3.0
and Safari (and even doesn't produce the shaky effect as with inline
images). Not in Mac OS X Explorer 5.2.3, but since that isn't developed
anymore anyway it's irrelevant. Win IE 5.5 doesn't understand this
either. I have no newer Win IE version available.

Still, using a background image isn't always a practical alternative for
an in-line image. So IMO this doesn't resolve this issue.

I've heard from one browser developer who argued as I expected that
something that is hidden cannot be hovered over. I disagree. It seems to
me that CSS' "hidden" really means "invisible". After all, its
countervalue is "visible", not to mention the property being
"visibility".

Just because you can't see something doesn't mean it isn't there. If
it's there, you can hover over it.

No different from not being able to see the bottom of the ocean but
being able to hover over it with radar to make that bottom visible. No
different from not being able to see microbes but being able to hover
over them with a microscope and make them visible. No different from not
being able to see music but being able to hover over it with a wave
editor and make it visible.

Any thoughts?

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

Jan Roland Eriksson

On Wed, 01 Dec 2004 03:52:22 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:

In article <us************************@news.euro.net>,
Sander Tekelenburg <us**@domain.invalid> wrote:
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}
In case someone cares, using the image as a background image can give
the wanted effect. See
<http://santek.no-ip.org/~st/tests/CSS/visibility.html>.

Works for me in Mac OS X versions of Mozilla 1.7, Opera 7.5.4, iCab 3.0
and Safari (and even doesn't produce the shaky effect as with inline
images).
We can add Firefox and Doczilla to that list of supporting browsers.
...Win IE 5.5 doesn't understand this either.
No, to me known, version of IE will get it.
Still, using a background image isn't always a practical alternative for
an in-line image. So IMO this doesn't resolve this issue.
While I can understand the urge to test browsers for CSS compliance, I
still have not been able to come up with a good practical use for
something in a web page to be invisible in its natural state but become
visible on hover. How would any one know that there is something to be
"hovered" for visibility in the first place?
I've heard from one browser developer who argued as I expected that
something that is hidden cannot be hovered over. I disagree...

So do I, for just about the same reasons as you give, but still, any
input on a practical use of this particular function?

--
Rex

Sander Tekelenburg

In article <n7********************************@4ax.com>,
Jan Roland Eriksson <jr****@newsguy.com> wrote:

On Wed, 01 Dec 2004 03:52:22 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:
[...]

[<http://santek.no-ip.org/~st/tests/CSS/visibility.html>]
While I can understand the urge to test browsers for CSS compliance, I
still have not been able to come up with a good practical use for
something in a web page to be invisible in its natural state but become
visible on hover. How would any one know that there is something to be
"hovered" for visibility in the first place?

Through context. For example: <http://www.lotzofmusic.com/>. The idea
was that of those horizontal bars with 'lotz of fishes' some items would
disappear on hover and others would only appear on hover. When you
clearly see a block of images like that, with some missing, I'd say most
people will quickly discover that something happens when you hover over
them. Those who don't won't miss anything important. The idea was simply
to be cute - to give people something to 'do' while listerning to the
music.

As I said in my original message this is of course utterly unimportant,
purely decorative. Then again, that's the very nature of CSS ;) which is
why this 'matters'.

Possibly a more useful application could be to position a
visibility:visible <A> element element over a couple of
visibility:hidden other <A> elements that point to subections - make the
first disappear on hover and the second appear, thus creating a sort of
navigation menu. (I haven't tried this. It might not work well, given
that unlike with an image, with text there's no way to know the size of
the hover area.)

I've heard from one browser developer who argued as I expected that
something that is hidden cannot be hovered over. I disagree...

So do I, for just about the same reasons as you give

This argument seems to have already convinced one browserdeveloper.
Hopefully others will pick this up too. Jonny, Rijk, Dave Hyatt, and
whoever's in charge of this at Mozilla: are you listening? ;)

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

Sander Tekelenburg

In article <us************************@news.euro.net>,
Sander Tekelenburg <us**@domain.invalid> wrote:

In article <n7********************************@4ax.com>,
Jan Roland Eriksson <jr****@newsguy.com> wrote:
On Wed, 01 Dec 2004 03:52:22 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:

[...]

[<http://santek.no-ip.org/~st/tests/CSS/visibility.html>]
While I can understand the urge to test browsers for CSS compliance, I
still have not been able to come up with a good practical use for
something in a web page to be invisible in its natural state but become
visible on hover. How would any one know that there is something to be
"hovered" for visibility in the first place?

Through context. For example: <http://www.lotzofmusic.com/>. The idea
was that of those horizontal bars with 'lotz of fishes' some items would
disappear on hover and others would only appear on hover. When you
clearly see a block of images like that, with some missing, I'd say most
people will quickly discover that something happens when you hover over
them. Those who don't won't miss anything important. The idea was simply
to be cute - to give people something to 'do' while listerning to the
music.

As I said in my original message this is of course utterly unimportant,
purely decorative. Then again, that's the very nature of CSS ;) which is
why this 'matters'.

In case is interested: I've now implemented this, at a test location:
<http://santek.no-ip.org/~st/lom/>. Works well in Mozilla, Opera and
iCab 3.0.

Safari screws up, seemingly on the overflow:hidden. It also requires the
SPANs to be 1 pixel bigger then the background images they contain, or
else no hover effect...

Win IE 5.5 messes up somewhat at the homepage, but doesn't affect the
access to content negatively, so that's fine with me.

I'd appreciate it if someone would be willing to let me know how Win IE
6, which I don't have available, takes this.

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

Jan Roland Eriksson

On Fri, 10 Dec 2004 07:10:59 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:

[...]

In case is interested: I've now implemented this, at a test location:
<http://santek.no-ip.org/~st/lom/>. Works well in Mozilla, Opera and
iCab 3.0.
And in Firefox 1.0 of course.
I'd appreciate it if someone would be willing to let me know how Win IE
6, which I don't have available, takes this.

I get _only_ one row of squares in IE6 (last SP's installed and all)
where the first left square is cut in halves and only the right half is
shown. None of them reacts at all to being hovered of course.
Rest of the rows are just not there at all.

I kind of like the idea though, user controlled <BLINK> in supporting
browsers :-)

--
Rex

Sander Tekelenburg

In article <5a********************************@4ax.com>,
Jan Roland Eriksson <jr****@newsguy.com> wrote:

On Fri, 10 Dec 2004 07:10:59 +0100, Sander Tekelenburg
<us**@domain.invalid> wrote:
[...]

<http://santek.no-ip.org/~st/lom/>. Works well in Mozilla, Opera and
iCab 3.0.

And in Firefox 1.0 of course.

Right. I only test Mozilla, assuming its derivatives behave the same.

[...]
I get _only_ one row of squares in IE6 (last SP's installed and all)
where the first left square is cut in halves and only the right half is
shown. None of them reacts at all to being hovered of course.
Rest of the rows are just not there at all.
Thanks! This sounds fine to me. (Now let's see if my client cares... ;))
I kind of like the idea though, user controlled <BLINK> in supporting
browsers :-)

LOL

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

Visualize on hover

This discussion thread is closed

Similar topics