Any negative SEO issues with using CSS-formatted textual popups?

[apprentice]

I recently came across a very interesting CSS tutorial that describes how to achieve rollover effects and in particular create a text popup for a menu list. The idea is rather simple and clever; a hidden span element within the anchor that is initially set to 'none', but is also set to 'block' so that it will display some sort of textual description if you hover over it:

<li><a href="/page1/blue-widget">Blue Widget<span>A few words about blue widgets. Blue widgets are cool. They are blah blah</span></a></li>

A few additional lines of CSS take care of the styling and positioning of the description text to appear just underneath the menu. That is really nice. It would appeal to many visitors who might happen to be unclear of 'what this category is about' and thinking whether to click on it or not. Thus, in such case this effect can prove lifesaving as otherwise, there is a chance that the user might decide not to click and leave instead (since there was no description). Now on to my point.

From a SEO viewpoint, the text within the anchor <a> has significant value for spiders. In my above example the desired keyword text for the link is "Blue Widget". However, the <span> element has some additional text. Is that additional text encapsulated by the <span> element also counts as part of the keyword for the link? I am just worried that if it is, it would dilute the keyword emphasis for the link, which would be a SEO disaster. Consider: "Blue Widget" vs "few words about blue widgets. Blue widgets are cool they are blah blah". Is that the case or am I being paranoid and the spiders totally ignore the text in the <span> element?

With Regards

[justdave]

I've not seen that before, but I would lean toward your interpretation. I believe everything within the <a></a> would be anchor text. I'm fairly sure you can do the same thing without including all the extra text within the anchor text, though.

[apprentice]

I think there are several ways to do it. One of this, probably the most common, JavaScript. Using CSS, I think I could specify several divs just underneath the menu, which would hold all text for each of the menu items. It would be more messy though as I they will be super imposed in the same space, all set to hidden and enabling as hovering over the appropriate menu links.

If I am right as you say and <span> is also taken into consideration by SEs, I wonder if there is any tag that is known to be stripped whilst being crawled. I am not sure if the abbr does that, but yet again, I don't know if it was intended to be used in such way.

Can't think of anything else right now - need some sleep;)

Regards.