Posted by Ben C on 09/30/06 19:54

On 2006-09-30, Chris <krimgelas@hotmail.com> wrote:
> Ben C wrote:
>
>> On 2006-09-30, richard <don@john.son> wrote:
>>> http://www.oswd.org/design/preview/id/2849
>>>
>>> When moving mouse over the 3 small images, another larger one pops up.
>>> As I did not see any specific JS in the source, am I assuming correctly
>>> that xhtml can emulate this effect?
>>> I haven't been able to look at the CSS yet. Just curious.
>>
>> You can use the :hover pseudo for this:
>>
>> .large
>> {
>> visibility: hidden;
>> }
>>
>> .small:hover .large
>> {
>> visibility: visible;
>> }
>>
>> that kind of thing.
>>
>> I haven't looked at their CSS either :)
> This is exactly something I need, but it doesn't work for me, so can I ask
> you to be a bit more specific? I put the "small" class in my img tag, and
> added a width and height for large:
>
> .large
> {
> width: 50px;
> height: 50px;
> visibility: hidden;
> }
>
> .small: hover .large
> {
> visibility: visible;
> }
>
><a href="/" title=""><img src="icon.png" class="small" alt="" /></a>
>
> So why does it not work? What am I missing?

First thing is you need to lose the space between .small: hover (i.e.
..small:hover).

Second point is that this is a descendent selector:

..small:hover large
{
...
}

selects anything with a class of "large" that's a descendent (i.e.
nested inside) anything with a class of "small" that's also being
hovered over.

In your example, there's nothing with class "large", and the img, which
has class "small" has no descendents. So nothing matches the selector.

One way of doing it is this:

<style type="text/css">
/* big thing inside an anchor-- basically don't display it */
a .big
{
display: none;
}

/* big thing inside a hovered anchor-- do display it */
a:hover .big
{
display: inline;
}

/* small thing inside a hovered anchor-- don't display it */
a:hover .small
{
display: none;
}
</style>

...
<a href="#">
<img src="small.png" class="small"></img>
<img src="big.png" class="big"></img>
</a>

Note also the difference between "display: none" and "visibility:
hidden". display:none means carry on as if the element weren't there at
all, visibility:hidden means leave a hole in the page for it, but make
it invisible.

[Back to original message]