Question

我正在尝试基于CSS / jQuery的评级。这就是我现在所拥有的：JSFiddle。

<div class="rating">
     <div class="active" style="width: 70%"></div>
</div>

当鼠标光标在父级（.rating）上时，我需要更改.rating > .active的百分比。例如，我将鼠标向右移动50％，因此.active将具有50％的宽度。

Example with JS

$('.rating').on('mouseover', function(){    
    var position = $(this).position();

    $(this).find('.active').css('width', position.left);
});

但它总是让我“8”。所以我不知道为什么。

Answer 1

<强> DEMO

添加了mousemove个活动。 position.left表示div的位置。如果从左侧位置减去鼠标x坐标位置，您将得到正确的值。

$('.rating').on('mouseover mousemove', function(e){    
    var position = $(this).position();
    $(this).find('.active').css('width', e.pageX - position.left);
});

$('.rating').on('mouseout', function (e) {
    var position = $(this).position();
    $(this).find('.active').css('width', '70%'); //reset to initial value if not clicked.
});

Answer 2

http://jsfiddle.net/km2p1ebb/3/

$(".rating").mousemove(function(e) {
    var gLeft = $(this).offset().left,
        pX = e.pageX;
    $(this).find('.active').width(pX - gLeft);
});

Answer 3

您无法重新发明轮子并使用现有的jQuery插件，例如jQuery Raty。

JSFiddle

＆＃13;

$('.js-raty').raty({
    path: 'http://wbotelhos.com/raty/demo/images/',
    score: 4,
    click: function(score) {
        $('.js-points').text(score * 2);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://wbotelhos.com/raty/lib/jquery.raty.js"></script>
<link href="http://wbotelhos.com/raty/lib/jquery.raty.css" rel="stylesheet"/>

<div class="js-raty"></div>
<div>Points: <span class="js-points">8</span></div>

＆＃13;

父级上光标位置的CSS子宽度

3 个答案: