hover시 이미지 질문

개인적으로 배경 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로 배경을 씌우고 엎어버리는게 깔끔하구 좋아요.