Posted by Chris on 10/02/06 19:59

Ben C wrote:

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

Thanks, it makes a lot more sense now.

Chris

[Back to original message]