pointer-events(1)

 

 

내 스킨의 네비게이션바를 보면

대강 이런식으로 아래와 같이 짜여져있다.

 

 

<ul class="category_list">
    <li>
      	<a class="link_item">대주제</a>
        <ul class="sub_category_list">
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
        </ul>
    </li>
</ul>

 

 

여기서 나는 대주제를 클릭했을시

전체목록의 페이지로 이동하는 것을 막고 싶어서,

그냥 a태그를 빼버리려고 했다.

 

 

 

그런데

티스토리에서 네비게이션 부분은 <nav>태그 안에

라는 치환자로만 이루어져있어서

디테일한 부분은 html 수정이 어렵다는 것을 알게되었다.

 

 

gnb 코드

 

 

 

따라서 css로 수정을 할 수 밖에 없었는데,

이럴 때 유용하게 쓸 수 있는 css코드가 바로

pointer-events: none; 으로,

 a(앵커)태그를 무효화 시켜서 클릭 기능을 비활성화 시켜준다.

 

이 css를 적용시키면 href 속성이 부여된 a태그도 클릭이 되지 않는다.

 

 

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

 

 

pointer-events에는 여러가지가 있는데,

여기서 auto와 none 그리고 global values를 제외한 나머지들은

visibility 태그 등이 사용된 SVG에서만 쓸 수 있으니 크게 신경 쓰지 않아도 될 것 같다.

 

 

'공부 > HTML + CSS' 카테고리의 다른 글

[css] mix-blend-mode  (0) 2021.01.08
1