퀵메뉴 질문입니다

제가 테마를 구입해서 꾸미는 중인데요

밴드부분인 

아래 초록색으로 표시한 부분을 추가 했어요

그리고 빨간색 카톡 부분처럼 초록색 밴드 부분의 색을 녹색으로 바꾸고 싶어서 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개

작업중인 페이지 링크 부탁드립니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

해결했습니다.
클래스 위치를 잘못 주었어요

댓글을 작성하려면 로그인이 필요합니다.

코드로봐선 알기 어려운데 링크올려주시면 좋겟네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

해결했습니다.
클래스 위치를 잘못 주었어요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고