javascript - JQuery 使用 mouseX 百分比隐藏/显示

Question

我确信这非常简单而且我很接近(大概)。我正在尝试根据鼠标的 X 位置在 10 个 div 之间切换(一次只显示一个)。

目前我已经将鼠标的 X 位置转换为一个百分比，并将其用作一个变量来根据光标的距离显示/隐藏一个元素，但是我无法弄清楚如何管理10 个元素，因此一次只显示一个。

这是 fiddle

谢谢!

//Look at mouse
$(document).mousemove(function(e) {
    // Set a variable (perc) X mouse position in pixels divide by the browser size times by 100
    var perc = e.pageX / $(document).width() * 100;

    // If that perc is less than 20 and higher than 10
    if (perc > 20 && perc < 30) {
        // show flick span
        $('#flick1').show();
    }
    else {
        // or hide flick span
        $('#flick1').hide();
    }
});

Answer 1

应该这样做:

$(document).mousemove(function (e) {
    $spans = $("span[id^=flick]").removeClass("desc");
    var perc = Math.floor(e.pageX / $(document).width() * $spans.length);
    $spans.hide().eq(perc).show();
});

.desc {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
    <span id="flick1">word 1</span>
    <span class="desc" id="flick2">word 2</span>
    <span class="desc" id="flick3">word 3</span>
    <span class="desc" id="flick4">word 4</span>
    <span class="desc" id="flick5">word 5</span>
    <span class="desc" id="flick6">word 6</span>
    <span class="desc" id="flick7">word 7</span>
    <span class="desc" id="flick8">word 8</span>
    <span class="desc" id="flick9">word 9</span>
    <span class="desc" id="flick10">word 10</span>
</h1>