css

CSS로 <a> 요소의 link 비활성화 시키기

핑계/ editor

  • 0 comments
  • 1,737 views
  • 2017년 8월 8일

<a> 요소에 CSS 한줄 추가해서 link 를 비활성화 시켜보아요 ~

CCS로 <a> 요소에 걸려있는 link 비활성화 시키는 방법을 알아보겠습니다.

아래 예제를 보면 총 4개의 navigation 메뉴가 있는데요
각각의 메뉴를 클릭을 해보면 4개 모두 해당페이지로 이동합니다.
(css는 생략하겠습니다.)

Markup

<body>
<nav class="gnb">
        <ul>
                <li><a href="http://html5around.com/wordpress/" target="_blank">메인</a></li>
                <li><a href="http://html5around.com/wordpress/tutorials/" target="_blank">튜토리얼</a></li>
                <li><a href="http://html5around.com/wordpress/board/" target="_blank">게시판</a></li>
                <li><a href="http://html5around.com/wordpress/about/" target="_blank">어바웃</a></li>
        </ul>
</nav>
</body>

HTML5AROUND on html5around.com

 

3번째 메뉴인 ‘게시판’ 링크를 비활성화 시켜볼께요~
그리고 opacity 속성을 추가해서 비활성화인걸 시각적으로 표현할께요~

3번째 <li> 에 있는 <a> 요소에 CSS코드를 추가하면 되겠죠?

추가 CSS

.gnb li:nth-child(3) a {
        pointer-events: none;
        opacity: 0.5;
}

HTML5AROUND on html5around.com

이처럼 비활성화 시키고 싶은 <a> 요소에 ‘pointer-events’ 속성을 추가하면
클릭이 안되고, 마우스 포인터의 모양변화도 일어나지 않습니다.
많이 사용해보세요 ~~

핑계

댓글 먹고 살아요~

Leave a Reply

avatar