퀵메뉴 질문입니다

퀵메뉴 질문입니다

QA

퀵메뉴 질문입니다

본문

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

밴드부분인 

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

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

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 59,285
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT