OnMouseOver + Div

@almostbob showed the simple inline route and @emhmk1 hinted at wiring handlers from script. Both work, but here are practical, up-to-date options and pitfalls to consider so the effect covers the whole <div> reliably and accessibly.

For purely visual changes prefer CSS (fast, simple, and works without JS). Use the :hover (and :focus if keyboard access is needed) to toggle styles; this keeps behavior declarative and separates concerns. See the MDN notes on :hover for details: MDN :hover

When you need behavior (running code when the pointer enters/exits), attach listeners from script rather than inline attributes. Use mouseenter/mouseleave to avoid repeated firing when the pointer moves over child elements (they do not bubble). A compact pattern is to add/remove a CSS class on enter/leave and let CSS handle transitions. See addEventListener and mouseenter docs for specifics: MDN addEventListener and MDN mouseenter

Account for touch and keyboard:

• Do not rely on hover for essential functionality; touch devices may not trigger it.
• Add keyboard support with tabindex="0" and :focus or focus/blur handlers so keyboard users can reach the same behavior.
• For unified pointer handling on touch/mouse/pen, consider Pointer Events (pointerover/pointerenter) — see MDN Pointer events

Troubleshooting tips: ensure the div isn’t covered by other elements, check pointer-events and z-index, and prefer CSS transforms for smooth animations. For many similar elements, use event delegation on a parent and closest() to find the target to keep code efficient.