카테고리에서 커스텀 CSS 호버 적용

제품 지원
1

커스텀 a:hover 스타일을 어떻게 추가하나요? 배경색은 변경했지만, a:hover를 추가하는 구조가 어떻게 되어야 하는지 전혀 모르겠습니다.

아래처럼 시도해 보았지만 작동하지 않습니다.

[data-category-id=“7”] {
.category-box { background: #0088CC10; }
a:hover { color: #D52133 !important; }
}

배경색에는 이 코드를 사용하고 있습니다.

.category-box[data-category-id="1"] { background: #0088CC10; }
.category-box[data-category-id="7"] { background: #231F2010; }
.category-box[data-category-id="8"] { background: #12a89d10; }
.category-box[data-category-id="5"] { background: #bf1e2e10; }
.category-box[data-category-id="9"] { background: #25AAE210; }
.category-box[data-category-id="6"] { background: #F7941D10; }
.category-box[data-category-id="10"] { background: #B3B5B410; }
.category-box[data-category-id="2"] { background: #80828110; }
.category-box[data-category-id="3"] { background: #E4573510; }
.category-box[data-category-id="4"] { background: #A461EF10; }

image
image1082×624 47.6 KB

2

HTML 구조가 어떤지 모르겠는데, 카테고리 페이지 링크를 공유해 주실 수 있을까요?

3

https://alertamaximo.com/categories

4

1번 카테고리 예시:

.category-box[data-category-id="1"] {
    background: #0088CC10;
    .badge-wrapper.bullet:hover span.badge-category {
      color: red;
    }
  }
}
5

완벽하게 작동했습니다. 정말 감사합니다.