12 Mar

Cool Code for Definitions

Saturday 12th March, 2016

doragravatar

I wanted to highlight text to show it as clickable so used this CSS snippet:

codepost1a

And the html ’em’ attribute

<em>Woof!</em> to get:

Woof!

Next, I wanted to create a definition when hovering over the text, which requires a simple html ‘span’:

codepost1b

so now we have:

Woof! Hover over ‘Woof’ if you have a mouse.

But what about touch devices with no hover capability? For this we need an ‘onClick’ event handler, so we get the same message when clicking on the word. Luckily, there are some Javascript snippets which work in html and don’t need separate scripting.

codepost1c

which gives us:
Woof! Click on ‘Woof!’ to see message in dialog box.

Comment Here