Why Copy Cursor over this browser text?

On the Everybody Codes quest pages, such as Everybody Codes, I get a Copy Cursor – the same cursor when you’re dragging a file to copy it – when I hover over the examples (the green dashed-line-border boxes). Anyone know why? Safari, Chrome, and Firefox all do the same thing.

The CSS styling for that text includes cursor: copy (along with the style to set the border, etc.), so when the cursor is over it, the browser changes the cursor to the copy cursor. You can right-click on the element, choose Inspect (or Inspect Element in Safari), and see what the CSS is for the element.

The element also has an event handler so when you double-click that text, it’s automatically copied to your clipboard, and a little in browser notification is displayed. The author has included cursor: copy in the style to let you know that will happen.

2 Likes

That explains it. Although, it defeats the purpose the the indicator if the user doesn’t realize that’s what it means!

1 Like