퀵메뉴 질문입니다
본문
제가 테마를 구입해서 꾸미는 중인데요
밴드부분인
아래 초록색으로 표시한 부분을 추가 했어요
그리고 빨간색 카톡 부분처럼 초록색 밴드 부분의 색을 녹색으로 바꾸고 싶어서 css에서 보라색 부분을 추가했는데 안되고 xi-icon이 글자를 따라가면서 깨져요
어디를 어떻게 추가하고 바꾸어야 밴드의 색이 녹색이 되고 아이콘도 제자리에 있을까요?
자세한 설명 부탁드립니다
- index-
<section class="right_quick fixed">
<ul class="quick_info">
<li> <a href="https://blog.naver.com/" target="_blank" style="width: 60px;"> <i class="ico"><i class="xi-bold"></i></i> <span style="opacity: 0; left: 0px;">블로그</span> </a> </li>
<li> <a href="https://open.kakao.com/" target="_blank" style="width: 60px;" class="kakao"> <i class="ico"><i class="xi-kakaotalk"></i></i> <span style="opacity: 0; left: 0px;"><strong>카톡상담</strong></span> </a> </li>
<li> <a href="https://band.us/" target="_blank" style="width: 60px;"> <i class="band"><i class="xi-bold"></i></i> <span style="opacity: 0; left: 0px;">밴드</span> </a> </li>
<li> <a href="<?= G5_THEME_URL ?>/html/location.php" style="width: 60px;"> <i class="ico"><i class="xi-maker"></i></i> <span style="opacity: 0; left: 0px;">오시는길</span> </a> </li>
</ul>
</section>
<script>
$(function() {
var $btn = $(".quick_info li a");
$btn.on('mouseenter focusin mouseleave focusout', function(e) {
switch (e.type) {
case 'mouseenter':
case 'focusin':
var bg = '#2253b8';
if($(this).hasClass('kakao')) {
bg = '#f9e02d';
}
TweenLite.to($(this), 0.5, {
width: "180px",
backgroundColor: bg,
ease: Cubic.easeOut
});
TweenLite.to($(this).find("span"), 0.7, {
left: 30,
opacity: 1,
ease: Cubic.easeOut
});
break;
case 'mouseleave':
case 'focusout':
TweenLite.to($(this).find("span"), 0.3, {
left: 0,
opacity: 0,
ease: Cubic.easeOut
});
TweenLite.to($(this), 0.5, {
width: "60px",
backgroundColor: "#343434",
ease: Cubic.easeOut
});
break;
}
});
});
</script>
-css-
.right_quick ul.quick_info li a.kakao span { color:#000}
.right_quick ul.quick_info li a.band span { color:#000}