헤더 메뉴의 호버 텍스트와 배경색을 동시에 변경하는 방법은?

개발
,
1

헤더 메뉴의 호버 텍스트와 배경색을 모두 변경하는 방법은 무엇인가요?
CSS에 익숙하지 않습니다.

코드와 삽입 위치를 알려주시면 감사하겠습니다!

@vinothkannans

2

Hey @rickwatson, 도움이 될 만한 코드를 준비했어요. 원하는 스타일에 맞게 color/background-color 값을 수정해야 합니다. 이 코드들을 common.css 탭에 넣으면 작동할 거예요.

헤더 메뉴 배경색:

.b-header {
   background-color: var(--tertiary);
}

링크

.b-header .nav-pills>li>a {
    color: var(--secondary);
}

링크 (호버 시)

.b-header .nav-pills>li>a:hover {
    color: #001aff;
    background-color: red;
}

color 및 background-color 속성에 사용할 수 있는 값에 대해서는 여기에서 더 자세한 정보를 볼 수 있습니다. 16진수 색상 코드, rgba 값, hsa 값 등을 입력할 수 있습니다.

다만, 다크 모드 지원과 같은 기능을 유지하기 위해 가능한 한 기존 CSS 변수를 사용하는 것이 권장됩니다.

사이트에 어떤 변수가 존재하며 각각 어떤 색상에 해당하는지는 브라우저 개발자 도구에서 확인할 수 있습니다 (:link: 접근 방법).

도구를 열면 Styles 탭에서 :root 선택자에 대한 color_definitions.scss의 선언을 확인해 보세요.

example
example814×1394 189 KB