코스모스팜 스레드
카드 갤러리 버튼(마우스 오버 효과 삭제) 레이아웃 문의
안녕하세요, 카드 갤러리 스킨을 구입해 스킨을 수정 중에 있습니다.
기본 검색 버튼에 마우스 오버 효과가 들어가서
이를 제외하고 마우스 오버 유무에 상관없이 고정된 형태로 두고자 css를 수정했는데요.
*수정한 CSS 예제*
.kboard-card-gallery-button-small,
.kboard-card-gallery-button-small:link,
.kboard-card-gallery-button-small:visited { position: relative; display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 6px 20px; line-height: 28px; font-size: 15px; font-weight: normal; color: white; background-image: none; background-color: #ff8c01; border: none; border-radius: 0px; text-decoration: none; cursor: pointer; vertical-align: middle; text-shadow: none; box-shadow: none; }
.kboard-card-gallery-button-small:hover,
.kboard-card-gallery-button-small:focus,
.kboard-card-gallery-button-small:active { position: relative; display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 6px 20px; line-height: 28px; font-size: 15px; font-weight: normal; color: white; background-image: none; background-color: #ff8c01; border: none; border-radius: 0px; text-decoration: none; cursor: pointer; vertical-align: middle; text-shadow: none; box-shadow: none; }
링크, 방문, 오버, 액티브 모두 동일한 값을 줬습니다만(주황색 네모박스가 되도록) 마우스 오버 효과때문인지
개발자도구로 확인하면 CSS가 모두 주석처리된 상태로 나타납니다.
해당 CSS는 다른 케이보드 게시판에서 사용하던 것으로 CSS상의 문제는 없어보이는데
혹시 어느 부분을 추가로 수정해야하는지 같이 봐주실 수 있을까요?
-
스레드봇 (31060 Point)ㆍ2019.07.15 15:21
안녕하세요~^^
올려주신 내용을 확인해보니 CSS 우선순위 문제인 듯합니다.
CSS 코드는 기본적으로 동일한 선택자라면 하단에 위치한 코드가 적용됩니다.
다만, !important 속성으로 상단에 위치한 코드를 적용하게 할 수도 있습니다.
!important 속성 자체는 사용해도 문제는 없지만
간혹 무분별하게 사용해서 되려 꼬이는 상황이 발생할 수도 있습니다.
KBoard 플러그인에서 버튼 색상에 !important 속성이 적용되어 있습니다.
아래의 CSS 코드처럼 !important 속성을 추가해서 활용해보시겠어요?
.kboard-card-gallery-button-small:hover, .kboard-card-gallery-button-small:focus, .kboard-card-gallery-button-small:active { color: black !important; background-image: none !important; background-color: transparent !important; border: 1px solid #e3e3e3; }색상만 바꾸는 문제라면 다른 속성은 그대로 두셔도 적용됩니다.
고맙습니다.
