There are 2 Rules stacks available for Magic Mouse 2. One is a regular Rule stack and the other caters specifically for dynamic content. The settings for each are exactly the same except for one additional group of settings. View settings for the Dynamic content Rule stack.
Selector: All rules need you to specify which element(s) on the page that you want to show a different cursor style with. Most commonly this will involve you adding a custom class name to the Stacks 'CSS classes' box (e.g. my-class) and then referencing that name in the Rule stack (with .my-class - the dot indicates that we are referencing a CSS class name).
The Rule stack will apply the specified rule to all elements on the page that match the selector. For many examples of how to do this please refer to the examples in the demo project file.
Note: You may wish to add a note to remind yourself of what the Rule is targeting and what it is to do
Delay: If you use a stack that dynamically adds content with javascript on page load - and you want to attach a cursor mode to those elements - then you may need to delay the assignment of the related rule for a little while to allow that other stack to fully load the content. Experiment with timings but you would seldom need to use a delay longer than around 400ms.
After you have added the required selector, you then attach whatever style/state you want the cursor to take on when over that element.
Inverse: This state switches the cursor (and text/icon) colour to reflect the Inverse colour selection made in the parent stack.
Exclusion: This state adds an exclusion blend-mode effect to the cursor. Other blend-mode options are available in the Style stack but this is probably the most common/useful and so is available as a built-in state.
Custom style: If you need to further style a cursor then you can use the Style stack. You can then refer to the name of that style in the Custom style box. Note: You can attach multiple styles by adding multiple names in here (separated by a space).
Remove pointer state: If you have Detect links enabled in the parent stack then it automatically applies the default pointer style to all buttons and links. If you want to style a button or link in a different way then this will be easier to achieve if you remove the pointer state from the element.
Content: You can opt to add either text or an icon to the cursor. If you select either of those options from the drop down then you will be presented with a text box to enter the desired text or the name of the desired icon. The names of the built-in icon set can be found here.
Magic Mouse (on Enter): You can enable or disable Magic Mouse when the cursor enters the specified element.
Default cursor (on Enter): You can opt to show or hide the default mouse cursor when the cursor enters the specified element.
Magic Mouse (on Exit): If enabling Magic Mouse on Enter then you will likely want to disable it again when the cursor leaves the specified element.
