메뉴 클릭시 호버컬러 유지
본문
<style>
#gnb .gnb_1dli>a:hover,
#gnb .gnb_1dli>a:focus,
#gnb .gnb_1dli:hover>a,
#gnb .gnb_1dli>a.on {color:#f00;}
</style>
<script>
$(document).ready(function(){
$('#gnb .gnb_1dli').each(function(){
$('#gnb .gnb_1dli').on('click',function(event){
$(this).next('a').removeClass('on');
$(this).addClass('on')
});
});
});
</script>
관리자 설정에서 메뉴 넣어봤는데
메뉴 클릭시 호버컬러 유지하고 싶은데 제가 틀린건가요 ,,, 유지가 절대 안되네요
답변 1
클릭했을때 해당 부분에 추가하신 class가 적용이 되시던가요?
li에 들어가는게 맞으신가요? 맞으시면 유지되는게 되시는거아닌가요?
클릭했을때 원하는 부분에 class가 추가되고 그에 해당하는 css가 적용이 되어있으실텐데
저는 #gnb .gnb_1dli a.on a 에게 on 클래스를 주었는데
li 한테 지정하지도 않은 .gnb_1dli_over .gnb_1dli_on 두가지 클래스가 들어가서 제가준 a on 클래스는 먹질않네요
li에 적용이 되신다고하시면 아래처럼 바꾸셔야하지 않을까요? 맞나?
li다음에있는 a태그에 먹히게
$(this).next('a').removeClass('on');
$(this).next('a').addClass('on')
그리고
.gnb_1dli_over .gnb_1dli_on 얘네는 기본적으로 적용되어있는 class가 아닌지요?
해당 class가 방해를 하고 있다면 강제로 변경해주시면 되지않을까요?
!important 를 쓰시던지 jquery로 css를 변경해줘도 될 것 같습니다!
!important, jquery로 css를 변경해줘도 안먹네요 ,,,
음 혹시
.gnb_1dli_over .gnb_1dli_on 얘네는 기본적으로 적용되어있는 class는 어디서바꿔야할까요?
해당 화면에서 f12를 누르셔서 나오는 개발자도구 창에서 좌측 최상단에 커서모양 화살표를 클릭하시고 수정하고자하는 곳을 선택을 하시면 해당부분의 css나 적용되어있는 정보들이 나옵니다.
거기서 class 의 css경로 등도 확인해보실 수 있습니다.
.gnb_1dli_over .gnb_1dli_on 얘네는 안뜨네여,,,,,
