javascript - CSS 子级宽度由光标在父级上的位置决定

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.
});