제가 테마를 구입해서 꾸미는 중인데요
밴드부분인
아래 초록색으로 표시한 부분을 추가 했어요
그리고 빨간색 카톡 부분처럼 초록색 밴드 부분의 색을 녹색으로 바꾸고 싶어서 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}
답변 2개 / 댓글 2개
답변을 작성하려면 로그인이 필요합니다.
클래스 위치를 잘못 주었어요