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

但它总是 returns 我“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

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

<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>

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

CSS child width by cursor position on parent

javascript

jquery

html

css

rating