CSS Cursor on graphic symbol

Engaged ,
Feb 20, 2022 Feb 20, 2022

Copy link to clipboard

Copied

I have an CSS working on several elements.  I now want to add a 'move' cursor to a graphic symbol.  It's not working.

 

#ConcaveSphereLens {
cursor:move;
}

 

The symbol instance is correctly named.

Views

57

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Feb 21, 2022 Feb 21, 2022
Graphic symbols are canvas/CreateJS based objects. It means they live inside of a canvas element (e.g.:<canvas id="myCanvas" width="200" height="100">). So they cannot be modified by CSS. Components are DOM elements and live outside the canvas. And that's why they can be modified using CSS. Regards, JC

Likes

Translate

Translate
Adobe Community Professional ,
Feb 20, 2022 Feb 20, 2022

Copy link to clipboard

Copied

You can assign any valid CSS cursor name to a symbol instance on stage using the cursor property.

 

Like this:

this.graphic.cursor = "n-resize";

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Feb 20, 2022 Feb 20, 2022

Copy link to clipboard

Copied

Thanks JC.  

 

So external CSS loaded via the CSS component won't work for a graphic symbol?

 

If so, that's pretty odd as I'm already using the external CSS to change the cursor for ComboBoxes via the .ui-combobox_lens class.  That works OK...   So what is different about graphic symbols?  I also change the graphic symbol to button symboil, but it just gets the pointer cursor instead of the move or grab cursor.

 

.ui-combobox_lens{
	font-size: 10px;
	cursor:pointer;
}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 21, 2022 Feb 21, 2022

Copy link to clipboard

Copied

LATEST

Graphic symbols are canvas/CreateJS based objects. It means they live inside of a canvas element (e.g.:<canvas id="myCanvas" width="200" height="100">). So they cannot be modified by CSS.

 

Components are DOM elements and live outside the canvas. And that's why they can be modified using CSS.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines