Adding cursor: pointer to default or custom style isn't working
Closed this issue · 4 comments
Other custom styles are working perfectly, but adding cursor: pointer; isn't working at all, even if I use the * selector or adding !important. It always shows the default cursor used for the inspected element i.e. input shows text cursor and buttons show the pointer.
What I want to achieve is having a pointer cursor when inspecting each element
add cursor on inspected element? inspector dom will cover cursor element
@luoye-fe Yep, I directly added the pointer cursor to the inspector, but it is still showing default cursor
This is my style sheet
.dom__inspector .margin {
background-color: transparent;
}
.dom__inspector .border {
background-color: transparent;
}
.dom__inspector .padding {
background-color: transparent;
}
.dom__inspector .content {
background-color: transparent;
}
.dom__inspector {
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23266FF0FF' stroke-width='4' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
border-radius: 4px;
background-color: #a0c5e82f;
cursor: pointer;
}
.dom__inspector * {
cursor: pointer !important;
}
And this is how I initiate the DomInspector
let inspector = new DomInspector({
root: "body",
theme: "dom__inspector"
});
inspector.enable();
The background image is working perfectly, but the cursor: pointer; isn't working, even when I explicitly applied it to all elements under the dom-inspector class
because pointer-event attr you can cover the 'pointer-event' attr of class '.dom-inspector'
Ahhh, I missed the pointer-event attr thnx a lot. I actually applied a work around a by adding cursor attr to the body all nested elements when the inspector is enabled instead :D