호버시 전체 색깔을 저렇게 하고 싶은데요 보시다시피 이미지 부분에서 짤리는데 이거 어떻게 해결해야 할까요... 이미지 때문에 짤렸지만 돋보기 아이콘이 있습니다 ㅠㅠ
답변 3개
sinbi개인적으로 배경 hover 굉장히 싫어합니다. ㅎ
컨텐츠 집중에 방해되나서........
혹 hover 주시려거든, 테두리에 아주 아주 여릿하게만 주시는 걸 권합니다.
허접 하지만 요렇게하면 되실거같아요
css로 하면 돋보기 이미지가 위로 올라오게 못하지 않나요..?
<style>
.sct_10 .sct_li {
padding: 0px;
margin: 0px;
background:white;
border:1px solid #f0f1f2;
position:relative;
cursor:pointer;
}
.sct_10 .sct_li .sct_li_hover{
width:230px;
height:340px;
background:url("http://knt777.com/skin/shop/basic/img/hover3sec.png") no-repeat;
position:absolute;
top:0;
left:0;
display:none;
z-index:10;
}
</style>
<ul class="sct sct_10" style='display:inline-block;margin:0;'>
<li class="sct_li sct_clear" style="width:230px;height:340px">
<div class="sct_li_hover"></div>
<div class="sct_img"><a href="http://knt777.com/shop/item.php?it_id=1493192818" class="sct_a">
<img src="http://knt777.com/shop/img/no_image.gif" width="230" height="230" alt="신규">
</a></div>
<div class="sct_txt" style='padding-left:27px;padding-right:27px;font-size:14px;font-weight:normal'><a href="http://knt777.com/shop/item.php?it_id=1493192818" class="sct_a">
신규
</a></div>
<div style='padding-left:27px;padding-right:27px;color:#da3131;font-size:15px;font-weight:bold;' class="sct_cost">
\0
</div>
</li>
</ul>
<script>
$(function(){
$('.sct_li').hover(function(){
$('.sct_li_hover', this).show();
}, function(){
$('.sct_li_hover').hide();
});
});
</script>
이미지 부분은 자체적으로 백그라운드에 흰색 배경이 같이 있어서 그러는거세요.
오버해서 색깔을 바꾸기에는 힘들어 보입니다.
그렇게 하는것보다는 div로 배경을 씌우고 엎어버리는게 깔끔하구 좋아요.
답변을 작성하려면 로그인이 필요합니다.