Expand on Hover

Hi all,

I'm part of Moser Community Toastmasters, club 9521. I'm working on our front page and I had an idea for a section of text that expands-on-hover to show additional text. I found a bit of code that does precisely what I'm looking for... in css, but I don't know how to implement it through FTH & CKEditor.

**text + div expand on hover with css**

Heck, I'm not even sure we, as club admins, have access to code in something like this.

Then there's the fact that I don't really code, I just research until I find someone who's solved my issue, ahead of me.

Any relevant thoughts are appreciated.

Kind regards,
Mr. Malloy

You do not have access to the site css, you can use inline css. You will have to figure it out for yourself though. Please read the terms of service before trying anything out of the ordinary.

Brian wrote: You do not have access to the site css, you can use inline css.

:hover cannot be used in inline CSS, only in style blocks or in CSS files. (per CSS/HTML specs)

So a style block could be inserted in the editor Source View. However, even that is problematic. Because of the way FTH builds the website HTML on the fly from the templatte, putting style blocks in what will be the body of the constructed HTML will cause the browser to stop parsing it once it hits the style block and start over... this will cause your website to load slower. Additionally, as style blocks are global not local, there is always the possibility that it may affect other parts of the HTML.

Hmm,

Well thank you, gentlemen. It sounds like the seemingly ideal code isn't quite as ideal in practice. Just in case, I'll put the question out there of whether there is a different way to create an expansion on hover. I'm sure there are plenty of other creative ways I can present the content, that fit within the bounds of the tools; and as Brian pointed out, the ToS. My focus tends to narrow once the spark of an idea ignites.

Regardless, I appreciate the clarification and prompt replies.

Kindly,
Mr. Malloy