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?" Please note that only the top list item is set up to work right now. And, of course, if you notice any other foolishness on my pages, I bask in criticism. Markup http://www.calibercommunicationsllc.com/hidden/Clarence/notecards.html CSS http://www.calibercommunicationsllc.com/hidden/Clarence/Clarence-Heller.css Thanks much, 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/
