[css] “pointer-events : none”사용시 CSS 커서 속성 추가

Program / 글쓴이

특정 링크를 비활성화하고 커서 스타일을 적용하려고하는데이 CSS 명령이 적용 cursor: text;되지 않습니다. 커서는 항상 기본값입니다. 최신 Firefox 버전을 사용하고 있습니다.

CSS :

pointer-events: none !important;
cursor: text;
color: Blue;

답변

를 사용 pointer-events: none하면 해당 요소와의 모든 마우스 상호 작용 이 비활성화 됩니다 . cursor속성 을 변경 하려면 부모 요소에 변경 사항을 적용해야합니다. 링크를 요소로 래핑하고 cursor속성을 추가 할 수 있습니다.

여기에 예

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

그러나 몇 가지 브라우저 불일치가 있습니다. IE11에서이 작업을 수행하려면 의사 요소가 필요한 것 같습니다. 의사 요소를 사용하면 FF에서 텍스트를 선택할 수도 있습니다. 이상하게도 Chrome에서 텍스트 없이도 텍스트를 선택할 수 있습니다.

업데이트 된 예

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

답변

원래 질문 이후로 꽤 오래되었지만 이것은 포인터 이벤트가없는 래핑 요소와 커서가없는 내 솔루션입니다.

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS :

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

CodePen 예

편집하다:

  • Chrome은 tabindex 속성이있는 요소 (tabindex = “-1″포함)에 대한 클릭에 초점을 추가하기 시작했습니다. 가장 빠른 해결책은 onfocus="this.blur()"요소의 초점을 맞추지 않도록 설정 하는 것입니다.
  • 요소에 초점을 맞추지 않도록해야합니다. 그렇지 않으면 Enter 키로 활성화 할 수 있습니다.

답변

지정 pointer-events:none하면 요소와 커서 사이에 마우스 상호 작용이 없음을 적극적으로 선언합니다. 따라서 커서도 가질 수 없습니다 . 모든 마우스 동작에 보이지 않습니다 .

여기에서 찾을 수있는 증거 .

답변

제거 pointer-events: none !important;. JavaScript를 사용하여 링크 비활성화 :

anchorElement.onclick = function(){
  return false;
}

JavaScript anchorElement가 노드 또는 요소 자체 라는 것을 모르는 경우 . 요소를 얻는 가장 일반적인 방법은 HTML id속성 을 사용하는 것입니다. 다음이 있다고 가정 해 보겠습니다.

<a id='whatever' href='#'>Text Here</a>

코드는 다음과 같습니다.

document.getElementById('whatever').onclick = function(){
  return false;
}

노드를 얻는 다른 방법이 많이 있습니다.

답변

내 사용 사례는 포인터 이벤트가있는 어떤 부모 요소도 가질 수없는 드래그 가능한 요소였습니다.

드래그하는 동안에 만 잡는 커서를 강제하는 전역 스타일을 조건부로 적용하여 해결했습니다. (나는 React 및 스타일 구성 요소를 사용하고 있지만 동일한 논리를 vanilla js에 적용 할 수 있습니다).

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

답변

다른 div를 만들고 마지막 div에 정확히 배치하고 다음과 같은 CSS를 만들 수 있습니다. 

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

답변

래퍼 대신 내부의 순수 CSS로도 수행 할 수 있습니다. (머티리얼 웹 컴포넌트와 함께 사용하므로 코드가 조금 더 복잡해집니다.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

또한 노력 ::before과 ::after함께 button:disabled직접,하지만 그냥 그렇게 할 수 없었다 …