Stylesheets - li:hover

Author

li:hover - IE issue

bne

2007-03-21, 7:17 am

Hi,

My brain's a bit fried on this one.

I'm using the li:hover method to display sub menus at http://dev.hyl.co.uk/guide4life/.
All works swimmingly in FF, however IE7 loses the hover (and so the
sub menu) when you mouse over items further down the sub menu list.
This only seems to happen when the sub menu is over the text of a
paragraph (try further down the page eg: "Confidentiality" - it
works!?)

Any ideas?

Harris Kosmidhs

2007-03-21, 7:21 pm

bne wrote:
> Hi,
>
> My brain's a bit fried on this one.
>
> I'm using the li:hover method to display sub menus at http://dev.hyl.co.uk/guide4life/.
> All works swimmingly in FF, however IE7 loses the hover (and so the
> sub menu) when you mouse over items further down the sub menu list.
> This only seems to happen when the sub menu is over the text of a
> paragraph (try further down the page eg: "Confidentiality" - it
> works!?)
>
> Any ideas?
>

li:hover is not understand by IE. I use javascript for similar things in IE.

This happens in IE6. I haven't tested it in IE7 but for what you are
saying I think it's the same :-(

elephant

2007-03-21, 7:21 pm

If you'd like to avoid using javascript, you can do it another way,
though it can be more messy, and may not be worth it over javascript.

in the LI you have set to hover on your site, instead put in

<a href='#' style='display: block; width: 100%; height: 100%;'
id='mouseOverBar'>
<ul style='display: none;'>
<li>blah1</li>
<li>blah2</li>
</ul>
</a>

With proper styling of course, and the hover set to the link. Having
a block item inside of a link, even a link set to display as a block
does throw validation warnings, but none of the current browsers will
have a problem with it. If you'd like to stop these errors you can
use spans in the link, and change their display to block, but, you'd
really only be doing it to make it validate, it wont do anything to
help a users experience.

If any of this doesn't make sense, let me know and I'll try to give
you the code for the site you linked.

On Mar 21, 9:13 am, Harris Kosmidhs
<hkosm...@remove.me.softnet.tuc.gr> wrote:
> bne wrote:
>
>
>
>
> li:hover is not understand by IE. I use javascript for similar things in IE.
>
> This happens in IE6. I haven't tested it in IE7 but for what you are
> saying I think it's the same :-(

bne

2007-03-22, 7:22 pm

Hi Harris,

Thanks for your help.

> On 21 Mar, 14:13, Harris Kosmidhs <hkosm...@remove.me.softnet.tuc.gr> wrote:
>
> li:hover is not understand by IE. I use javascript for similar things in IE.
>
> This happens in IE6. I haven't tested it in IE7 but for what you are
> saying I think it's the same :-(

IE7 started (thankfully) to support the :hover pseudo class, and for
versions 6 and below I use a script which spoofs the same
functionality.

My question really was if anyone could see why hovering over the
nested list items when they are over a paragraph should knock out the
hover effect?

It's got to be some display or z-index issue, but I can't see it.

Ben

bne

2007-03-22, 7:22 pm

Hi Elephant,

> On 21 Mar, 20:28, "elephant" <matt.mi...@XXXXXXXXXX> wrote:
> If you'd like to avoid using javascript, you can do it another way,
> though it can be more messy, and may not be worth it over javascript.

I did think about going down this path, but there are validation and
accessibility considerations.

As it turns out I've just heard the client wants to ditch the popout
menu idea anyway - Problem solved :)

Thanks for your help

Ben