[thelist] Hover events within a UL

Will willthemoor at gmail.com
Fri Feb 9 00:16:20 CST 2007


Hi Craig,

You're running into lots of problems.

:hover only works on <a> elements in IE.  You'll need some javascript to
make it work.

<a> tags are 'inline' elements.  <ul>s are 'block' level elements.  Inline
elements can not contain block level elements.

google 'onclick' events.  if you want something to trigger an action upon
clicking a ul, you'll need to use some javascript.

validating your html can solve lots of problems - or at least shed light on
them.  you've got HTML problems in there that will only make matters worse.
:)

lots of pointing out problems.  least I can do is give a solution. :)  to
get your h3s to change when hovering over the ul change your last css
declaration to this:

ul.blocks:hover, ul.blocks:hover h3{
    background-color: #7790AE;
    color: #ffffff;
}

Will

remember, read those backwards: any time there is an h3 inside a hovered ul
with the class of .blocks{do: something;}
On 2/8/07, Craig Givens <nospamaddy at gmail.com> wrote:
>
> Hello fellow Evolters,
>
> I'm trying to apply an :hover event to a UL so that when a user mouses
> over the block, the entire block appears to change background colours
> and is also clickable with an applied <a href="link.htm">. Here is a
> sample of what I worked up:
>
> http://www.geocities.com/markjohnson45/sample.html
>
> However, there are some problems:
>
> 1) I can only seem to highlight the block in Firefox, not IE
> 2) I cannot make the entire block clickable because an HREF cannot be
> wrapped around a UL in the markup
> 3) The LI within the UL gets highlighted and changes colour, but the
> <h3> within the UL does not (unless I hover it specifically).
>
> Is there any way to overcome all of these problems with some fancy CSS
> rules and tricks?
>
> -thanks,
> Craig
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>



More information about the thelist mailing list