-----Original Message-----
From: Tim Climis [mailto:[email protected]]
Sent: Monday, August 02, 2010 9:54 PM
To: [email protected]
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 [[email protected]]
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/
