Bootstrap Cursor

Small utility that sets cursor when element is hovered

Torus Kit new features for Cursor
Pointer Not allowed Zoom Pointer events none

Overview

In some scenarios, there is a need to provide a visual feedback of the element behavior on :hover. When button is not allowed to interact, when image thumbnail can be clicked and expand to bigger preview, when the element has to act as a button, etc. Use .cursor-{pointer|na|zoom-in|zoom-out} class on that element and .pointer-none to remove any pointer events - disable any element interaction.

Pointer

Add .cursor-pointer class to set a pointer cursor.

This text has a pointer cursor although this isn't a link.

<p>
  <strong class="cursor-pointer bg-black-10 p-1">This text</strong> has a <em>pointer cursor</em> although this isn't a link.
</p>

Not allowed

Add .cursor-na class to set a not allowed cursor.

This text has a not-allowed cursor.

<p>
  <strong class="cursor-na bg-black-10 p-1">This text</strong> has a <em>not-allowed cursor</em>.
</p>

Zoom

Add .cursor-zoom-in and .cursor-zoom-out class to set different zoom cursors.

This is zoom in while this is this is zoom out

<p>
  <strong class="cursor-zoom-in bg-black-10 p-1">This is zoom in</strong> while this is <strong class="cursor-zoom-out bg-black-10 p-1">this is zoom out</strong>
</p>

Pointer events none

Add .pointer-none class if you want to disable any interactions on element.

Link This link is not clickable.

<p>
  <a href="#" class="pointer-none btn btn-primary">Link</a> This link is not clickable.
</p>