473,241 Members | 1,481 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

Visualize on hover

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/>
Jul 21 '05 #1
12 4981
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>
Jul 21 '05 #2

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
Jul 21 '05 #3
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>
Jul 21 '05 #4
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/>
Jul 21 '05 #5
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
Jul 21 '05 #6
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/>
Jul 21 '05 #7
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/>
Jul 21 '05 #8
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
Jul 21 '05 #9
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/>
Jul 21 '05 #10
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/>
Jul 21 '05 #11
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
Jul 21 '05 #12
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/>
Jul 21 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: A. Novruzi | last post by:
Hi, I am looking for a free 3D visualization software, running in Linux, and able to visualize 3D functions in nonstructured mesh (basically, my mesh is a set of thetraheders used for some 3D FE...
7
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's...
6
by: Nikolaos Giannopoulos | last post by:
If I have simplified html (I have removed height, weight, alt, etc... attributes to simplify the example) such as: <div id="header"> <a href="blah.html"><img src="img/blah.jpg"></a> </div> ...
6
by: Michael Rozdoba | last post by:
I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...
15
by: Robert Mark Bram | last post by:
Hi All! Problem I began with: Netscape/Opera supports hover for different elements, IE only supports hover for <a> and I want to use hover for <td class="menu"> I then found a fix using some...
1
by: Israel | last post by:
Hi... Somebody knows how can i visualize TIF image in my .Net Webproyect, is there a .NET webcontrol who can open and visualize TIF image (Black and white, gray scale and color)? Is there a...
1
by: richard.hallgren | last post by:
Hi, I have several Xml schemas that I like to visualize in some sort of tree view (so it's possible to expand and collapse different nodes in the schema). I also have to make it possible to...
15
by: itschy | last post by:
Hi. I have a couple of nodes (just ids, no coordinates whatsoever) and links betweens them (weighted). Is there any existing solution to visualize this network in php? Thanks itschy
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.