#cursor

#Introduction

The cursor CSS property controls the mouse pointer displayed when the pointer hovers over an element.

#Examples

desktopsrc/cursor/App.tsx

Code

Preview

#Syntax

cursor: pointer;

#Values

Lynx currently supports keyword values only, such as pointer, text, grab, and other standard cursor keywords.

#Lynx Mini App Syntax

You can declare cursor the same way as other CSS properties.

<view class="clickable">
  <text>Hover me</text>
</view>

.clickable {
  cursor: pointer;
}

If your compiler pipeline does not apply cursor as expected, prefer declaring it in a stylesheet selector or class.

#React Syntax

<view style={{ cursor: 'pointer' }}>
  <text>Hover me</text>
</view>

#Formal Definition

#Formal Syntax

cursor: <cursor-keyword>;

#Differences from Web

• Only keyword values are supported.
• URL-based cursors, local image cursors, and custom hotspot positions are not supported.

#Notes

• To allow cursor to inherit in Lynx, enable CSS inheritance in your front-end configuration.
• You can also explicitly add cursor to customCSSInheritanceList.
• See enableCSSInheritance and customCSSInheritanceList for more details.

#Compatibility