Hoverable JS

Table of content

Usage

Use this component to move an oversized element withing its parent bounds.

app.jsindex.html

js

import { Base
, createApp
 } from '@studiometa/js-toolkit';
import { Hoverable
 } from '@studiometa/ui';

class App
 extends Base
 {
  static config
 = {
    name
: 'App',
    components
: {
      Hoverable
,
    },
  };
}

export default createApp
(App
);

html

<div data-component="Hoverable" class="relative w-96 h-96">
  <div data-ref="target" class="absolute w-[120%] h-[120%]">
    ...
  </div>
</div>