퀵메뉴 질문입니다

2021-04-22 (목) 13:49:13 3,539

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

밴드부분인 

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

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

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

답변에 대한 댓글 1개

해결했습니다.
클래스 위치를 잘못 주었어요
2021-04-22 (목) 14:22:41

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

답변에 대한 댓글 1개

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

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