안녕하세요. 메뉴관련 클릭시 색상 변화 부분 문의 드립니다.
본문
안녕하세요. css를 보고 있는데 잘안되서 혹시 도움을 주실수 있을까 문의 드립니다.
.gnb_wrap .depth01 > a:before{content:'';width:100%;height:0px;background:#0b80ed;position:absolute;bottom:0;left:0;}
.gnb_wrap .depth01 > a:after{content:'';width:100%;height:0x;background:#0b80ed;position:absolute;bottom:0;left:0;}
.gnb_wrap .depth01 > a.on:before, .gnb_wrap .depth01 > a:hover:before{height:100%;-webkit-transition:0.2s all ease-in-out;-o-transition:0.2s all ease-in-out;transition:0.2s all ease-in-out;transition-delay:0.1s;}
.gnb_wrap .depth01 > a.on:after, .gnb_wrap .depth01 > a:hover:after{height:5px;-webkit-transition:0.2s all ease-in-out;-o-transition:0.2s all ease-in-out;transition:0.2s all ease-in-out;}
마우스 오버시 색상이 파란색으로 변하는데 클릭을 하면 다른색상으로 진한 파랑 으로 유지되게 하고 싶은데 잘되지를 않습니다. 요소를 추가 해야 하는 부분인지
클릭시 색상이 변화되게 하고 싶은데 도움을 부탁드립니다.
감사합니다.
되지
답변 3
.class:active{
color:red!important;
}
클릭시(마우스누르고 때지 않은상태)면 위처럼 하면 :active로 하시면됩니다. 클릭 후 해당 페이지 이동 후 계속 상태를 유지하고 싶으신거면 php변수랑 연계해서 별도로 클래스를 줘야합니다
클릭 순간만 색깔 변하게 하는 거면 :active 이용하면 되는데,
클릭 후 계속 유지되게 하려면 JS나 PHP로 URL 주소 중 일부 고유 파라미터 유무를 감지해 클래스 등 지정해줘야 할 겁니다. 아미나/나리야/배추빌더 경우 기본으로 이 기능 지원하니, 해당 빌더를 이용하거나 참고해 보세요.
간단하게 자바스크립트로 적용해 볼 수 있을것 같습니다.
다음을 참고 하셔서 원하시는 형식으로 구현 하시면 되지 않을까 합니다.
<style>
.gnb_wrap .depth01 > a:before {
content: '';
width: 100%;
height: 0px;
background: #0b80ed;
position: absolute;
bottom: 0;
left: 0;
}
.gnb_wrap .depth01 > a:after {
content: '';
width: 100%;
height: 0px;
background: #0b80ed;
position: absolute;
bottom: 0;
left: 0;
}
.gnb_wrap .depth01 > a.on:before,
.gnb_wrap .depth01 > a:hover:before {
height: 100%;
-webkit-transition: 0.2s all ease-in-out;
-o-transition: 0.2s all ease-in-out;
transition: 0.2s all ease-in-out;
transition-delay: 0.1s;
}
.gnb_wrap .depth01 > a.on:after,
.gnb_wrap .depth01 > a:hover:after {
height: 5px;
-webkit-transition: 0.2s all ease-in-out;
-o-transition: 0.2s all ease-in-out;
transition: 0.2s all ease-in-out;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
$(".gnb_wrap .depth01 > a").click(function () {
// 클릭 시 .on 클래스 토글
$(this).toggleClass("on");
});
});
</script>