hover시 이미지 질문
본문
호버시 전체 색깔을 저렇게 하고 싶은데요 보시다시피 이미지 부분에서 짤리는데 이거 어떻게 해결해야 할까요... 이미지 때문에 짤렸지만 돋보기 아이콘이 있습니다 ㅠㅠ
답변 3
이미지 부분은 자체적으로 백그라운드에 흰색 배경이 같이 있어서 그러는거세요.
오버해서 색깔을 바꾸기에는 힘들어 보입니다.
그렇게 하는것보다는 div로 배경을 씌우고 엎어버리는게 깔끔하구 좋아요.
허접 하지만 요렇게하면 되실거같아요
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>
개인적으로 배경 hover 굉장히 싫어합니다. ㅎ
컨텐츠 집중에 방해되나서........
혹 hover 주시려거든, 테두리에 아주 아주 여릿하게만 주시는 걸 권합니다.
