"포인터 이벤트 : 없음"을 사용할 때 CSS 커서 속성 추가

"포인터 이벤트 : 없음"을 사용할 때 CSS 커서 속성 추가

---

특정 링크를 비활성화하고 커서 스타일을 적용하려고하는데이 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;
}

---

지정 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;
}

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

---

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

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

CSS :

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

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

참고URL : https://stackoverflow.com/questions/25654413/add-css-cursor-property-when-using-pointer-events-none