On Monday, August 02, 2010 10:18:22 pm Chip Meyer wrote:
> What I'm Trying to Do
> Have a list within which each item consists of a thumbnail image and some
> descriptive text wrapping around it. When a user hovers the thumbnail, a
> larger image pops up.
>
> What's Not Working
> The larger image pops up when the user hovers over any part of the list
> item, which includes the descriptive text. This is more than a little
> obtrusive. I know that the page is working as it is currently coded to, but
> I have been unable to change to what I want (see above).
>
> What I Have Tried
> - Applying :hover to the thumbnail img rather than the li
> - Wrapping the image in various stuff (e.g. <a>, <p>, <div>) and applying
> the :hover to those tags
> - Applying a dedicated class .hoverTrigger:hover to the thumbnail img
>
> Below, you will find links to the markup and css.
>
> My main priority is to achieve the desired effect, but I am also curious
> about why my above solutions did not work, which I think is a corollary of
> "Which elements can you apply :hover to, and in which browsers?"
>
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 God’s 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
______________________________________________________________________
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/
