Show DIV Content on Hover, Focus and Click

Showing extra information when a user points to an element can be useful, but a mouse-only mouseover interaction excludes keyboard and touch users. Use an interaction that also works with focus and, where appropriate, click/tap.

Prefer native disclosure when suitable Top ↑

For content users intentionally open and close, <details> and <summary> often provide a better native solution than manually showing a floating DIV.

Hover and keyboard-focus example Top ↑

What is HTML?

const trigger = document.getElementById('helpLink');
const panel = document.getElementById('helpText');

['pointerenter', 'focus'].forEach(type =>
  trigger.addEventListener(type, () => panel.hidden = false)
);
['pointerleave', 'blur'].forEach(type =>
  trigger.addEventListener(type, () => panel.hidden = true)
);

Original Plus2net demo Top ↑

The existing demonstration is preserved for comparison with the older mouse-event technique.

Open DIV description demo

DIV basics DIV positioning DIV click interaction Show/hide layer

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: