DEMO

Question

我的情况有问题，这是我的代码： HTML代码：

<div class="wrapper">
    <div class="elem green"></div>
    <div class="elem red"></div>
    <div class="elem blue"></div>

    <div class="Line"></div>
</div>

CSS代码：

.wrapper {
    position: relative;
    width: 800px; height: 400px;
    margin-left: 100px;
}
.elem {
    position: absolute;
    top: 10px;
    width: 100px; height: 100px;
}
.green {
    left: 10px; background: green;
}
.red {
    left: 110px; background: red;
}
.blue {
    left: 210px; background: blue;
}
.Line {
    position: absolute;
    width: 10px; height: 500px;
    background: yellow;
    left: 60px;
}

JavaSript代码：

$(document).ready(function() {
    var img = $('.Line');
    var offset = img.offset();

    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
});

我想在黄色元素移动绿色元素时，绿色元素添加新类名，申请红色元素或蓝色元素。怎么做。

谢谢，

Answer 1

我相信你想做这样的事情：

function customAddClass(d)
{
    if(d>160 && d<190)
    {
        $(".elem").removeClass('test');
        $(".green").addClass('test');
    }
    else if(d>=190 && d<215)
    {
        $(".elem").removeClass('test');
        $(".red").addClass('test');
    }
    else if(d>=215 && d<235)
    {
        $(".elem").removeClass('test');
        $(".blue").addClass('test');
    }
}

jquery：如何知道元素悬停在另一个元素上

1 个答案:

DEMO