Users sometimes ask how to create content that shows up only upon hover. If you have the Custom Design upgrade, this is rather easy. If you don’t have the upgrade, it’s very complicated but possible.
A. If you have the Custom Design upgrade
The solution I’m suggesting here makes the post column expand vertically to reveal the spoiler content when you hover over a word such as “Spoiler” – or any other word or phrase you might prefer, as long as you’d like to mark the existence of each and every spoiler with the same word or phrase.
(If you are interested in a different solution, you can post your question in the wordpress.com CSS forum.)
Add this code in the CSS editor:
And format each spoiler this way in the so-called Text editor (make sure there’s a blank line between the opening div and the beginning of the text):
Notice that the word “Spoiler” (or the word or phrase you’ll use instead of this one in the content rule) is incorporated in the CSS, so it’s introduced automatically: you don’t actually type it in the Text editor before each spoiler.
The suggested CSS is a discreet version, with the word “Spoiler” underlined, and no differentiation in the spoiler text (other than a top and a bottom border to separate it from the regular content). Naturally you can add more CSS rules to change the styling.
I don’t have the CSS upgrade on this blog, so I can’t display an example here. Here’s a screenshot (
for a live example see this demo post [Sorry, upgrade on that blog has expired]):
B. If you don’t have the Custom Design upgrade
A simple way to create rollover text would be this code in the Text editor:
For the result, hover over this word. It’s a crude solution, as you cannot change the styling of the rollover text or add line or paragraph breaks.
Other than this, WP staff would probably say you can’t create hover effects without the upgrade. This isn’t exactly true, because our blogs include rollover items that are produced solely by means of CSS: namely, the dropdown or flyout menu lists. So you can create similar effects if you use the IDs and classes that are used for these lists.
The basic coding would be something like this:
Unfortunately a) the parts I have highlighted vary from theme to theme, b) in most cases the default styling will be monstrous in a post (since it’s designed for the top menu), so you’ll need lots of additional coding to modify it. To find what the appropriate IDs and classes are, as well as what properties and values you should change, you need to examine the stylesheet of the theme you’re using (best way: the Firebug add-on in Firefox). So I’m only pointing this out as a general possibility – the rest depends on your coding skills.
Here’s an example (hover over the red text):
And here’s another one: