Question

我写过一个剧本。它确实有效！这只是有点垃圾。有人能告诉我哪里出错了。

基本上，我有一个5星评级框。当鼠标悬停在盒子的各个部分上时，我需要改变星星。

目前只有当您将鼠标移出和移出元素时，星星才会发生变化。我需要明星改变，而元素内的鼠标。我认为问题出在事件上，但我尝试了一对，似乎没有任何区别。

$(".rating").mouseover(function(e) {
    // Get Element Position
    var position = $(this).position();
    var left = position.left;

    // Get mouse position
    var mouseLeft = e.pageX;

    // Get Actual
    var actLeft = mouseLeft - left;

    $(".info").html(actLeft);

    if (actLeft < 20) {
        $(this).attr('style', 'background-position:0;');    
    } else if (actLeft < 40) {
        $(this).attr('style', 'background-position:0 -20px;');
    } else if (actLeft < 60) {
        $(this).attr('style', 'background-position:0 -40px;');
    } else if (actLeft < 80) {
        $(this).attr('style', 'background-position:0 -60px;');
    } else {
        $(this).attr('style', 'background-position:0 -80px;');
    }
});

Answer 1

我知道这很时髦，但我想我把它放在这里得到反馈^^。我没有测试过，但它应该可以工作。

这就是说，如何使用纯CSS来做到这一点：

<div class="stars">
   <span>Star<span>Star<span>Star<span>Star</span></span></span></span>
</div>

.stars span{
  background: url(not-selected.png);
}
.stars span:hover{
  background:url(selected.png);
}

Answer 2

试试这段代码：

jQuery的：

<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
    $(function() {
        $.each($('.starHighlight div'), function(i, val) {
            $(val)
                .hover(function() {
                    //TODO: remove hard coded numbers and calculate it based on icon size/number of stars
                    var starShift = (4 - i) * -20;
                    $(val).parent().css("backgroundPosition", starShift + "px bottom");
                }, function() {
                    $(val).parent().css("backgroundPosition", "0 0");
                });
        });
    });
/* ]]> */
</script>

CSS：

<style type="text/css">
    .starSelector, .starHighlight { width:100px !important; height:20px; background:url(http://front-end-developer.net/examples/star.png) top no-repeat; }
    .starSelector div { cursor:pointer; width:20px; height:20px; float:left; text-indent:-1000px; }
    .starHighlight { background-position:-100px bottom; }
</style>

XHTML：

<div class="starSelector">
    <div class="starHighlight">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    </div>
</div>

编辑：在Firefox，Chrome，IE6，IE7和IE8上测试。

当用户将鼠标移出控件时，您可能需要添加某种点击事件以保持突出显示的星数。

Answer 3

鼠标进入元素时会触发鼠标悬停事件。您想要的活动是mousemove。

JQuery - 让我的脚本工作？

3 个答案: