테스트 사이트 - 개발 중인 베타 버전입니다

퀵메뉴 질문입니다

나가자 4년 전 조회 3,379

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

밴드부분인 

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

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

y
4년 전

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

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

답변에 대한 댓글 1개

나가자
4년 전
해결했습니다.
클래스 위치를 잘못 주었어요

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

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

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

답변에 대한 댓글 1개

나가자
4년 전
해결했습니다.
클래스 위치를 잘못 주었어요

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

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

로그인