-----Original Message-----
From: Tim Climis [mailto:tcli...@exchange.iu.edu] 
Sent: Monday, August 02, 2010 9:54 PM
To: css-d@lists.css-discuss.org
Cc: Chip Meyer
Subject: Re: [css-d] :hover :schmover

On Monday, August 02, 2010 10:18:22 pm Chip Meyer wrote:

It took me a little bit, but once I figured it out, it was a real faceplam 
moment.

Let's take a look at your selector:

#notecardGallery ul li:hover ul li

That's fine and dandy, as long as you don't mind massive amounts of hoverable 
space.

Now, let's take a look at what I presume you changed your selector to:

#notecardGallery ul li img:hover ul li

Let's think about this for a minute.  This selects the li in the ul, that's 
*inside* your image tag.  What's inside your image tag?  for that matter, how 
do you even put things in a self-closing tag? ;-)

With this insight, I think we can see why it didn't work in the anchor tag 
either.  In fact, in order to make this effect work, and still have valid HTML, 
we have to change the markup a bit.  (To make it work as written, we'd have to 
use javascript, I think).

I'm thinking something like:

<LI>
        <A>
                <IMG src="./Clarence Heller - Everyday Sacred_files/Womb of 
God.JPG" 
alt="Womb of God" width="66" height="51">
                <IMG class="big" src="./Clarence Heller - Everyday 
Sacred_files/Womb 
of God.JPG" alt="Womb of God" width="490" height="383">
</A>
        In the Womb of God<BR>
        If I paint the same experience about which I write, the painting 
follows the writing, which follows the experience. Except for this painting. I 
had intended to paint God and me staring lovingly at each other in prayer. 
First I painted myself. Then when I started to paint Gods face, I realized I 
was painting myself in the womb of God.  What a sense of intimacy, yet I still 
yearned for more, and so wrote the following poem (January 6, 2009):
</li>

#notecardGallery a img.big {
        display: none;
        position: absolute;
        top: 0px;
        left: 76px;
        font-weight: bold;
        z-index: 1;
}
#notecardGallery a:hover img.big {
        display: block;
}

---Tim

Thank you, Tim. Just exactly right.

I think I had glimpsed (but not wholly understood) the insight of descendant 
vs. adjacent sibling selector. I think your solution is simpler anyway, but out 
if curiosity, is it possible to group selectors to effect something like...

#notecardGallery ul li img:hover + (ul li)

wherein this would style a li that is inside a ul that is adjacent to an image 
being hovered. The parentheses I know are not valid; just my attempt to 
describe what I am thinking of. Make sense? Can it be done?

Thanks again for the fix.

Chip






______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to