SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

영카트 리스트스킨 CSS 수정

영카트 리스트스킨 CSS 수정

QA

영카트 리스트스킨 CSS 수정

본문

 

영카트 쇼핑몰을 작업하고 있는데요..

CSS부분의 실력이 딸려서 조언 부탁 드립니다.

질문은 이미지로 합니다.

 

32288393_1605607209.615.png

 

아래의 소스에서 빨간색 부분을 클릭했을때 이부분 보이게
    if ($this->view_sns) {
        $sns_top = $this->img_height + 10;
        $sns_url  = G5_SHOP_URL.'/item.php?it_id='.$row['it_id'];
        $sns_title = get_text($row['it_name']).' | '.get_text($config['cf_title']);
  $sns_over_arr = G5_SHOP_SKIN_URL.'/img/arrow_mbs2.png';
        echo "<div class=\"sct_sns\">";
        echo get_sns_share_link('facebook', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/facebook.png');
        echo get_sns_share_link('twitter', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/twitter.png');
        echo get_sns_share_link('kakaotalk', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/kakaotalk.png');
  echo get_sns_share_link('band', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/band.png');
  echo get_sns_share_link('urlcopy', $sns_url, $sns_title, G5_SHOP_SKIN_URL.'/img/urlcopy.png');
  echo "<div style='position:absolute; right:64px; bottom:-14px;'><img src='$sns_over_arr'></div>";
        echo "</div>\n";

  
    }

 

 

 

 // 장바구니 찜하기, SNS버튼
 echo "<div class=\"sct_icons\">";
 $icon_cart = G5_SHOP_SKIN_URL.'/img/r_icon_cart.png';
 $icon_wish = G5_SHOP_SKIN_URL.'/img/r_icon_wish.png';
 $icon_sns = G5_SHOP_SKIN_URL.'/img/r_icon_sns.png';
 $icon_cart_over = G5_SHOP_SKIN_URL.'/img/r_icon_cart_over.png';
 $icon_wish_over = G5_SHOP_SKIN_URL.'/img/r_icon_wish_over.png';
 $icon_sns_over = G5_SHOP_SKIN_URL.'/img/r_icon_sns_over.png';
 echo "<table width='' border='0' cellspacing='5' cellpadding='0' align='center'>
    <tr>
    <td><div class=\"sct_cart\"><div class=\"btn_cart\"  data-it_id=\"{$row['it_id']}\"><img src=\"$icon_cart\" width=\"45\" onmouseover=\"this.src='$icon_cart_over' \" onmouseout=\"this.src='$icon_cart'\"></div></div></td>
     <td><div class=\"sct_cart\"><div class=\"btn_wish\"  data-it_id=\"{$row['it_id']}\"><img src=\"$icon_wish\" width=\"45\" onmouseover=\"this.src='$icon_wish_over' \" onmouseout=\"this.src='$icon_wish'\"></div></div></td>
    <td><div class=\"sct_cart\"><div class=\"btn_share\"><img src=\"$icon_sns\" width=\"45\"  onmouseover=\"this.src='$icon_sns_over' \" onmouseout=\"this.src='$icon_sns'\"></div></div></td>
   </tr>
   </table>";
 echo "</div>"; 
 echo "<div class=\"cart-layer\"></div>\n";

 

 

 

/* 상품 목록 스킨 10 */
.sct_10 .sct_ct_wrap {height:190px; background-color:#FFFFFF; padding:5px 30px 5px 30px;}
.sct_10 .sct_li_main {position:relative;float:left;margin:0 14px 14px 0;}
.sct_10 .sct_li_sub {position:relative;float:left;margin:0 14px 14px 0;}
.sct_10 .sct_li {position:relative;float:left;margin:0 14px 14px 0;border:1px solid #C6C9D0}
.sct_10 .sct_li:hover {position:relative;float:left;margin:0 14px 14px 0;  border:1px solid #000000; }
.sct_10 .sct_last {margin:0 0 15px !important}
.sct_10 .sct_clear {clear:both}
.sct_10 .sct_img{position:relative; }
.sct_10 .sct_sns{display:none;position:absolute; left:15px; bottom:73px; padding:5px 0px; z-index:60;width:90%; text-align:center; border:1px solid #959595; background:#FFFFFF;}
.sct_10 .sct_img:hover .sct_sns{display:block}
.sct_10 .sct_sns a{display:inline-block;border-radius:50%;margin:2px ;width:40px;text-align:center;height:40px;padding:10px 0;background:rgba(0,0,0,0.4)}
.sct_10 .sct_sns .share-facebook:hover{background:#415b92}
.sct_10 .sct_sns .share-twitter:hover{background:#35b3dc}
.sct_10 .sct_sns .share-kakaotalk:hover{background:#F7E100}
.sct_10 .sct_sns .share-band:hover{background:#1AC620}
.sct_10 .sct_sns .share-urlcopy:hover{background:#178BF4}
.sct_10 .sct_sns img{width:22px}
.sct_10 .sct_icons{position:absolute;bottom:10px; z-index:60;width:100%; text-align:center;}
.sct_10 .sct_icons .sct_cart{display:none; bottom:10px;z-index:60; width:49px; cursor:pointer;}
.sct_10 :hover .sct_cart{display:block}
.sct_10 .sct_icon {margin:10px 0}
.sct_10 .sct_txt{border-bottom:1px solid #d9dde2;font-size:14px; padding:10px 0px; background-color:#FFFFFF; line-height:150%;}   /* 상품명 */
.sct_10 .sct_basic{color:#617076; padding:10px 0px 5px 0px; font-family:"GmarketSansL"; font-weight:bold;}  /* 부가설명 */
.sct_10 .sct_supply{color:#28732D; font-size:12px; margin:5px 0; font-weight:bold;} /* 추가옵션 */
.sct_10 .sct_point{color:#666; font-size:11px; margin:0px 20px 5px 0}  /* 포인트 */
.sct_10 .sct_img{position:relative; }   /* 별점 */
.sct_10 .sct_dict {padding:5px 0px 0px 0px;  font-size:14px; text-decoration:line-through;font-weight:normal;display:block; color:#858a8d;  font-family:Montserrat; }    /* 시중가 */
.sct_10 .sct_cost {padding:5px 0px 5px 0px;  font-size:16px; font-weight:bold; font-family:Montserrat; }   /* 판매가 */
.sct_10 .sct_dict_pre {text-align:right; margin-top:-35px; padding:5px 0px 5px 0px;  font-size:30px; letter-spacing:-2px;  font-family:"GmarketSansL";}  /* 할인율 % */
.sct_10 .sct_adm {position:absolute; margin-top:-29px;; right:0px; color:#FFFFFF; padding:7px 10px 5px 10px; cursor:pointer; z-index:99}
.sct_10 .sct_adm:hover {color:#FF6600; background-color:#000000; cursor:pointer; z-index:99}
.sct_10 .shop_icon_1 {display:none;}   /* 히트 아이콘 */
.sct_10 .shop_icon_2 {display:none;}   /* 추천 아이콘 */
.sct_10 .shop_icon_3 {display:none;}   /* 최신 아이콘 */
.sct_10 .shop_icon_4 {position:absolute;top:10px;left:10px;width:50px;height:50px;line-height:50px;font-size:14px;border-radius:50%;font-weight:bold}   /* BEST 아이콘 */
.sct_10 .shop_icon_5 {display:none;}   /* 할인 아이콘 */

 

 

 

 

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 2

채택됨

SugarSkull님의 답변

링크를 통해 소스를 다시 살펴본결과

단순한 css 로는 처리가 어려울 것 같습니다.

 

DOM 의 위계가 아래 그림과 같은 구조로 되어있어 .sct_img 에 마우스에 올라갔을시 .sct_sns 가 활성화 될 순 있지만

특수한 핵을 사용하지 않는 이상 css 로 .sct_cart 에 마우스가 올라갔을 때 부모요소를 조정할 수 있는 방법은 없습니다.

따라서 .sct_sns 의 위치를

.sct_icons > .sct_cart > .btn_share 에 위치시킨다면 :hover 및 :active 선택자로 조정이 가능할 것 같습니다.

그 외 다른방법으로는 DOM 위치 이동 없이 자바스크립트로 제어하는 방법이 있습니다.

 

3067568377_1605613835.1725.png

 

.sct_sns 를 .sct cart > .sct_share 로 위치시키고

 


.sct_10 .btn_share .sct_sns {
    display: none;
    position: absolute;
    left: 15px;
    bottom: 65px;
    padding: 5px 0px;
    z-index: 9999;
    width: 90%;
    text-align: center;
    border: 1px solid #959595;
    background: #FFFFFF;
}
.sct_10 .btn_share:hover .sct_sns {
    display: block;
    bottom:60px;
}

 

를 입력해주니 작동은 가능하지만 jquery 의 toggle 을 이용하는게 더 효율적이겠다.. 라는 과학적인 결론이..

주소복사
채택됨
답변의 댓글

마르스컴퍼니님의 답변

잘 될지 모르겠습니다만,

/skin/shop/basic/style.css 204 라인을 다음과 같이 바꾸면 되지 않을까 싶습니다.

 

.sct_10 .sct_img:hover .sct_sns{display:block}

->
.sct_10 .btn_share img:hover .sct_sns{display:block}

 

css 파일 변경 후에는 /extend/version.extend.php 에서 css 버전번호를 갱신후 주어야 됩니다.

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 12,852
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

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

© SIRSOFT