Product: Mingcedar Studio DESIGNER

Hover Script | Mingcedar Studio

Bind JavaScript that runs on mouse over and mouse out of a shape: Pointer Enter for highlight/hint effects, Pointer Leave to restore. Runs only on real pointer interaction in the exported page.

Published 2026-10-25T12:48:42.663290542Z Updated 2026-10-25T12:48:42.66328964Z

<div class="manual-doc-article manual-doc-article-section"><h2 id="hover-script">Interactions: Hover Script</h2>

Bind JavaScript that runs on mouse over and mouse out of a shape: Pointer Enter for highlight/hint effects, Pointer Leave to restore. Runs only on real pointer interaction in the exported page.

<h3 id="hover-script-item-1">Overview</h3>

<p>Hover Script attaches pointer-enter and pointer-leave scripts to a component for highlighting or temporary hints. It runs when a user moves the pointer in the Mingcedar runtime. Restore any appearance changed on enter in the leave script.</p>

</article>

<h3 id="hover-script-item-2">How to use it: the fields in its editor</h3>

<p>Trigger is Pointer Move. Both script boxes support multi-line code, ReadTag* and async calls such as setTimeout and fetch. Hover actions must not write devices:</p>

<ul>

<li>Pointer Enter (mouse over; called Mouse Over in the docs): script that runs when the pointer enters the shape.</li>

<li>Pointer Leave (mouse out; called Mouse Out in the docs): script that runs when the pointer leaves, used to undo what the enter script changed.</li>

<li>Context objects available in the script: object, objects, event (mouse context) plus tag, page, presentation, shape, hqVisuDesigner, and globals.</li>

<li>object is the current shape's DOM element, so you can set its style directly (e.g. object.style.opacity); shape.name is the shape name.</li>

<li>Note: Hover Script has no Enable/Condition gate (unlike Click Script); both scripts simply run.</li>

</ul>

<div class="manual-code" data-code-language="text"><div class="manual-code-toolbar"><span>Text</span><span class="manual-code-tools"><small>Text</small><button type="button" data-copy-code data-copied="Copied" data-failed="Select and copy the code" aria-label="Copy code: Text">Copy code</button><span class="manual-code-status" role="status"></span></span></div><pre tabindex="0" class="docs-code-block shiki github-light" style="background-color:#fff;color:#24292e" tabindex="0"><code><span class="line"><span>// Pointer Enter (mouse over)</span></span>

<span class="line"><span>object.style.opacity = "0.7";</span></span>

<span class="line"><span>// Pointer Leave (mouse out)</span></span>

<span class="line"><span>object.style.opacity = "1";</span></span></code></pre></div>

</article>

<p>Use for highlights and hints without a click.</p>

<ul>

<li>Device-icon hover highlight: dim the opacity or add a stroke when the pointer is over a pump/valve, restore on leave, to signal it is clickable.</li>

<li>Temporary info hint: on enter use hqVisuDesigner to show a note or emphasis border on the page, clear it on leave, without interrupting the operator.</li>

</ul>

</article>

<h3 id="hover-script-item-4">Limitations and troubleshooting</h3>

<p>Check runtime and restoration behavior:</p>

<ul>

<li>Enter changes are not auto-undone: you must write the matching restore logic in Pointer Leave, or the effect stays after the pointer leaves.</li>

<li>It runs only on real pointer interaction in the exported/host page, not in PowerPoint edit mode, so verify after export.</li>

<li>Do not call WriteTag* from Hover Script. The runtime grants write capability only to trusted click or Pointer Button press/release actions; keep hover purely visual.</li>

</ul>

</article>

</div>

<strong>Figure 1: Hover Script editor</strong>

<p>Fill the Pointer Enter and Pointer Leave scripts separately; the leave script restores what the enter script changed.</p>

</figcaption>

</figure>

</div>