悬停在父级列表项上时更改链接颜色时的奇怪行为

Question

My issue can be seen here - http://jsfiddle.net/aBSyH/3/

I'm using cufon text replacement and think that's the source of the issue.

The link's color should change when you hover in and out of the list item and it's content. But it's behaving quite strangely. It changes back to blue sometimes but generally stay red.

There seems to be something wrong with using cufon text and a selector like -

li.mainmenu:hover a {
    color:red;   
}

The cufon text does not revert to it's original colour when the mouse leaves the li's hover area.

Any idea why?

I'd prefer to fix the issue without adding any javascript (apart from chaging the cufon initialisation code).

Answer 1

This post offers an explanation of your problem. In your case

    Cufon.replace('li>a>li', {        
          hover: true
    });

fixes the issue.

Answer 2

Marjin pointed me in the right direction, if I could up vote his answer again I would.

I really should have read the instructions to begin with - https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10

This is how I fixed it -

Cufon.replace('ul#onesite_navigation > li', {
    hover: true,
    hoverables: { li: true },
    ignore: { ul: true },
    textless: { li: true }
});