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

Question

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

Answer 1

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>