jquery一张图片怎样实现鼠标滑到不同位置显示另一种样式和实现功能

比如鼠标滑到绿色部分，就显示带勾的那个，并将背景全部换成绿色的，急求

css部分，没怎么弄

<style>
        #container{
            width: 100%;
            height: 1000px;
        }
        .bg{
            width: 50px;
            height: 50px;
            float: left;
        }
        .bgC{
            width: 50px;
            height: 50px;
            float: left;
            display: none;
        }
    </style>

主要核心是把当前的style给container

<div id="container">
        <div class="bgChanges">
            <div class="bg" style="background: blue;"></div>
            <div class="bg" style="background: green;"></div>
            <div class="bg" style="background: #B8860B;"></div>
            <div class="bg" style="background: #8EE5EE;"></div>
            <div class="bg" style="background: #CD0000;"></div>
            <div class="bg" style="background: #CD00CD;"></div>
        </div>
        <div class="bgChecked">
            <div class="bgC" style="background: blue;">√</div>
            <div class="bgC" style="background: green;">√</div>
            <div class="bgC" style="background: #B8860B;">√</div>
            <div class="bgC" style="background: #8EE5EE;">√</div>
            <div class="bgC" style="background: #CD0000;">√</div>
            <div class="bgC" style="background: #CD00CD;">√</div>
        </div>
    </div> 

先吃饭

<script>
        $(function(){
            //alert($('.bg').length);
            for(i=0;i<$('.bg').length;i++){
                $('.bg').eq(i).on('click',function(){
                    //alert($(this).index());
                    var j = $(this).index();
                    $('.bgC').hide();
                    $('.bgC').eq(j).show();
                    $('#container').css('background',$(this).css('background'));
                })
            }
        });
    </script>

你应该用标签，将你有所有小图片的大图片，用样式按位截取放置，通过控制标签去实现你的效果，要不然的话，你通过坐标去控制岂不是很累

• 只需要为绿色图片对象绑定一个onmouseover事件，如 <img src="" onmouseover="mouseOver(event,this)"/>
• function mouseOver(e,obj){
• $(obj).css('background','图片url');
• }；

利用背景定位，css就可以解决，例如：

 #green{
     background : url("1.png");/*图片地址*/
    background-position : 0px 0px;/*图片位置*/
 }
 #green:hover{
    background-position : 20px 20px;/*指像绿色部分改变的位置图片位置*/
 }