Previous Message
Next Message

Can I style generated content?

Sent by Michael Landis on 26 September 2005 14:02


On 9/23/05, [EMAIL-REMOVED]

> I also encountered a problem with the generated content on hover.  I tried
> to remove the "< " on hover, but I am seeing all of the other links flash
> when I hovered over the link with the generarted content.

<snip />

> html>body #sidebar-nav li.selected a:before {
>         content: "< ";
>         }
> html>body #sidebar-nav li.selected a:hover:before {
>         content: ""; /*gets rid of < */
>         }

<snip />

> Why would hovering over a link with generated content cause a flash?

I'm not certain, but you may be asking the browser to do a lot in a
:hover rule. When you change content, you are asking the browser to
recalculate the size of the contents, which impacts all elements
around it. You might want to try other ways to reduce the impact of
your change. I tried a couple of different ways to deal with this, and
found that changing the font size to 0 for the generated content seems
to have the same effect, but not impact the surrounding elements as
much:

html>body #sidebar-nav li.selected a:hover:before {
    font-size: 0;
}

Since you only provided a portion of the code, I'm not sure if it will
be as effective when there is an entire page to generate, but perhaps
it is close enough.

The least impactful way only works if you have the generated content
after the contents instead of before. If you do that, you can simply
change the generated content's color to match the background color,
giving an illusion of removing the content even though it's still
there.

<snip />

> Is this a known firefox bug?

Although I didn't see any specific bugs for this in Mozilla's bug
database (http://bugzilla.mozilla.org), there are several bugs having
to do with the performance and stability of :hover styles. For now, I
would try playing with other ways to reduce the flickering -- bug
fixes move at their own pace, not necessarily ours. :)

HTH,

Michael
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: