add a way to override hover css

[eman1986]

I'd love to add a red hover to a delete option but I'd like it to be red only when the user hovers the delete item.

the thing I see is how to override the initial state, not the hover state

[bbrala]

You can use the className property when defining an item to add a custom class to specific items. You should be ok from there :)

[eman1986]

I did and that didn't work

[bbrala]

http://jsfiddle.net/u99z7415/

That seems to be fine? Perhaps you are missing some classes?

[eman1986]

oddly enough, it's not working for me

$.contextMenu({ selector: '.vendor-region-grid-actions', zIndex: 1000, trigger: 'left', items: { "edit": { "name": "Edit", "icon": "fa-pencil" }, "delete": { "name": "Delete", "className":"context-menu-danger", "icon": "fa-trash" } } });

`.context-menu-danger { color: #fff; background: #d9534f; }

.context-menu-danger.context-menu-hover { color: #fff; background: blue; }`

not sure what I'm doing wrong

[eman1986]

I can get it to work using your fiddle, but when on my app its not even acknowledging my css rule exists

http://jsfiddle.net/u99z7415/2/

[bbrala]

Perhaps the css is overwritten? In your dev console the html for the menu is at the bottom of the page. Check there perhaps?

[eman1986]

something is indeed overwriting the css, I moved it to a different spot and now its working