영카트 리스트스킨 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

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

단순한 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 버전번호를 갱신후 주어야 됩니다.

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

회원로그인

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