12 Mar

Cool Code for Definitions

Saturday 12th March, 2016


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


And the html ’em’ attribute

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


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


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.


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

Comment Here