Magnetic Cursor

Turn your mouse cursor into a magnet that can wrap links, buttons, or any element you choose on hover.

Special classes

The Magnetic cursor can be hidden ( cursor reverts to normal ) or can ignore ( no wrapping is applied ) elements if the element or a parent container contains one of the following special classes.

Depending on your needs, you can add the classes as you would usually do under the Advanced tab of any element.

  • Ignore class: .eh-magnetic-cursor__ignore
  • Hide class: .eh-magnetic-cursor__hide

 

Outer Container

  • Stroke Size: The stroke width
  • Width: The width of the outer container
  • Height: The height of the outer container
  • Border Radius: The border radius of the outer container
  • Color: The color of the outer container

 

Inner Container

  • Width: The width of the inner container
  • Height: The height of the inner container
  • Border Radius: The border radius of the inner container
  • Background Color: The background color of the outer container

 

Apply to whole page

  • Apply to whole page: Applies the cursor to the whole page

 

Additional Selectors

  • Additional Selectors: By default, the cursor will take effect on any element that has the default breakdance-link class. You can add additional css classes, id’s or any valid css selector here if you wish for that element to had the wrap effect applied to it as well.