Hover on question text

From Catglobe Wiki
Revision as of 05:40, 22 June 2017 by Hovietluu (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

If you want to show a hiding text of a question text's part with mouseover like below:

Result 1.png
Result 2.png

It is easy with following solution.

1. Create your hiding text and put it on html element with an id

please remember that you must have an id.

eg:

<p id="myid"><span style="color:#FF0000;"><strong>this will be shown when you hover on question text</strong></span></p>

see below screenshot:

Hover text .png

2. Copy following code and paste it into javascript tab on your question with changing the id on it

1 function injectStyles(rule) {
2     var div = $("<div />", {
3         html: '&shy;<style>' + rule + '</style>'
4     }).appendTo("body");
5 }
6 
7 injectStyles('.cg-ui-text #myid { display: none; } .cg-ui-text:hover #myid,.cg-ui-text:focus #myid { display: block; }');

please see screenshot to get more:

Hover js.png

3. Save, test and get a nice result.

The end of documentation.