Change cursor on hover

Questions
1

Is there a way to change the cursor? e.g. change to hand on hover over an element

2 Likes
2

No we don’t support this (yet). What is the use case?

3

One thing I’d use it for is to display the hand when hovering over a dropdown. I’ve made the up/down arrows invisible to show just a text, so could be useful for that.

1 Like
4

As an example of a use case, I’d like to have the cursor change to an edit symbol, like a pencil icon, when the user is hovered over something they can click to edit.

1 Like
5

+1, this would be useful, especially for when one needs to use Text elements for links.

1 Like
6

Is this feature still not available? I have searched the Forum and Reference Manual but don’t see any options for the cursor to change state upon hover. Is there a Plug-in maybe?

1 Like
7

I found a solution for personal plans and up.

  1. Convert png of desired cursor to .cur file here: PNG to CUR (Online & Free) — Convertio
  2. Create a file uploader on a random bubble page and upload the .cur file.
  3. Copy the “dynamic link” for the file
  4. Go to settings > SEO/Metatags > Script/metatag in header
  5. Add a style element in the header and add in the cursor CSS property:
*{cursor:url(your dynamic link url), default;}

For more info on the cursor css property, check out: cursor - CSS: Cascading Style Sheets | MDN

Hope this helps someone.
Happy building!

6 Likes
9

Any plan of future support? Like an on-hover question mark to show user hover for more information?

1 Like
10

+1 on wanting more control over cursor styles. For example, I’d like to be able to use a not-allowed cursor on disabled buttons. I have quite a bit of CSS in my app to override Bubble’s cursor styles, too. For example, Bubble will sometimes apply the I-beam “text” cursor to headers, which looks bad to me. And sometimes I’ll add an on-click workflow to an element but I don’t necessarily want that element to have the “pointer” cursor.

1 Like
11

I would also like this, would be very useful

1 Like
12

You can do this by adding a custom id to the element (the option to expose id’s for elements can be found in the general settings) and then add an html element to the page.

So if the custom id of the element is profile_dropdown then the HTML would be
<style> #profile_dropdown, profile_dropdown:hover { cursor:pointer !important; } </style>

11 Likes
14

Thank you @baibhavmundra111 !

1 Like