starfederation / datastar

A real-time hypermedia framework.
https://data-star.dev/
MIT License
733 stars 40 forks source link

Adding `.duration` to `data-show` expands hover area to include hidden sub-elements. #124

Closed BKFlister closed 2 months ago

BKFlister commented 3 months ago

E.g a simple menu dropdown, show submenu on hover Menu. Adding .duration or .duration_500ms expands the hover-area for the menu to include the submenu. Making the submenu appear before hovering the menu-text Menu.


<div data-store="{'_open' : false}">
  <ul id="menu" data-on-mouseover="$_open=true" data-on-mouseleave="$_open=false" style="background-color: #666;">
    <li>Menu
      <ul id="submenu" data-show.duration_500ms="$_open" style="background-color: #eee;">
        <li>Home</li>
        <li>Contact</li>
        <li>About</li>
        <li>Login</li>
      </ul>
    </li>
  </ul>
</div>
``

`data-show`
<img width="276" alt="image" src="https://github.com/user-attachments/assets/13038b4c-2acc-4800-ac40-0810a827bae2">

`data-show.duration_500ms`
<img width="300" alt="image" src="https://github.com/user-attachments/assets/89a2c633-b9e8-40dc-acdc-020207f6a55e">

<img width="299" alt="image" src="https://github.com/user-attachments/assets/d2cb24a9-4e28-449f-ba77-97778f7511e2">
rphumulock commented 3 months ago

Starting a Discussion on this issue.