[css] 마우스 동작에 따라 링크마다 다른 스타일을 적용하는 방법

아래 코드의 내용은 다음과 같다.

– 현재 열려 있는 페이지의 링크 아래에 작대기가 출력된다.
– 다른 페이지의 링크로 마우스 포인터를 옮기면 그 링크 아래에 작대기가 출력된다.
– 위의 상태에서는 현재 페이지의 링크 아래에 출력된 작대기가 사라진다.
– 포인터가 링크에서 벗어나면 다시 현재 페이지의 링크 아래에 작대기가 출력된다.

현재 열려 있는 페이지가 아닌 링크로 포인터를 옮긴 때 현재 페이지를 나타내는 링크에 적용되어 있는 스타일을 일시적으로 없애는 게 핵심 내용이다.

<style>
    .open
    {
        border-color: chocolate; border-style: hidden; border-bottom-style: solid;
    }
</style>

<nav style="font-size: 14px;">
    <a class="open">HOME</a> // 현재 페이지 표시
    <a href="/new.html">NEW</a>
    <a href="/contact.html">CONTACT</a>
    <a href="/login.html">LOG IN</a>
    <input type="search" placeholder="search ...">
</nav>

nav:hover > a
{
    border-style: hidden;
}

nav > a:hover
{
    border-color: chocolate;
    border-style: hidden;
    border-bottom-style: solid;
}

컨테이너인 <nav>에 포인터가 닿은 때 모든 링크들의 스타일을 일단 없앤다. 그런 뒤 포인터가 닿은 링크의 스타일만 수정한다.

위와 같이 현재 페이지 스타일을 internal css로 구현하지 않고 inline으로 구현하면 external css로 override할 수가 없다.

Post Views: 7

Most Viewed Posts