영카트 리스트스킨 CSS 수정
관련링크
본문
영카트 쇼핑몰을 작업하고 있는데요..
CSS부분의 실력이 딸려서 조언 부탁 드립니다.
질문은 이미지로 합니다.
아래의 소스에서 빨간색 부분을 클릭했을때 이부분 보이게
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 위치 이동 없이 자바스크립트로 제어하는 방법이 있습니다.
.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 버전번호를 갱신후 주어야 됩니다.
ㅠㅠ 않되네요