Highlight DOM Elements On Hover – TheRoom

Views Total:0 views
Official Page:Go to website
Last Update:May 1, 2021


Highlight DOM Elements On Hover – TheRoom


TheRoom is a JavaScript plugin that applies a customizable overlay effect to any DOM elements on hover.

Also provides the ability to display the current selector (tag, id, and class) you’re viewing on, similar to the web inspector.

You can also specify the DOM elements to exclude.

How to use it:

1. Download and import the ‘theroom.js’ into the document.

<script src=""></script>

2. Config and initialize the TheRoom library. That’s it.

  // options here

3. Full plugin options to config the TheRoom


  // string or DOM node of the inspector
  inspector: null,

  // If true and inspector option is not provided, theRoom will try to create an inspector element whose class is inspector-element for you and will be appended to body tag
  createInspector: false,

  // add the theRoom's namespace to html tag
  htmlClass: true,

  // block page direction
  blockRedirection: false,

  // exclude elements here
  excludes: []

4. More API methods.

// stop

// get status

5. Event handlers.

window.theRoom.on('mouseover', function (element) {
  // do something

window.theRoom.on('starting', function (element) {
  // do something

window.theRoom.on('started', function (element) {
  // do something

window.theRoom.on('stopping', function (element) {
  // do something

window.theRoom.on('stopped', function (element) {
  // do something

window.theRoom.on('click', function (element) {
  // do something

window.theRoom.on('hook', function (element) {
  // do something


v2.1.2 (05/01/2021)

  • Chore: packages are updated

v2.1.1 (10/23/2020)

  • Feat: hook event can manipulate mouseover and click events to be get called by returning false

v2.0.8 (10/15/2020)

  • Feat: Pass MouseEvent as the second argument in hover and click events

v2.0.7 (10/16/2020)

  • Fix: Inspector as HTML node bugfix
  • Tweak: Stop function minor tweaks

v2.0.6 (10/16/2020)

  • Feat: Resetting inspector styles on stop

v2.0.4 (10/16/2020)

  • Fix: empty excluded element list selector bug
  • Feat: new createInspector option and new exposed theRoom function configure

v2.0.2 (07/11/2020)

v2.0.1 (07/08/2020)

  • some tweaks and status improvement

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.