Question

我正在制作一个五星评级，我已经开始处理点击以及悬停，但是，我无法使用keyboArd上的tab键让它工作。我希望有人可以指出我正确的方向，因为我也尝试了焦点（），但它不起作用。

鼠标悬停时，光标所在的星形变为活动状态，同样适用于以前的所有星星。例如，如果光标悬停在第三颗星上，第三颗星，第二颗星和第一颗星将会突出显示。我想用键盘实现同样的东西

<div> 
    <div>
        <div class="left">
            <p><strong>Rate this article</strong></p>
        </div>
        <div class="left hide star-rating-message">
            <p>Thank you for your rating!</p>
        </div>      
        <div class="left fivestar">
            <div class="left hide average-rating-message">
                <p>Average rating</p>
            </div>
            <ul>
                <li><a href="#" class="fivestar-btn-empty"><span class="hide">a</span></a></li>
                <li><a href="#" class="fivestar-btn-empty"><span class="hide">b</span></a></li> 
                <li><a href="#" class="fivestar-btn-empty"><span class="hide">c</span></a></li>
                <li><a href="#" class="fivestar-btn-empty"><span class="hide">d</span></a></li>
                <li><a href="#" class="fivestar-btn-empty"><span class="hide">e</span></a></li>
            </ul>

       </div>   
       <div class="clearboth fivestar-comment">
           <div class="left hide padding8b comment-rating-message">
               <p>Thank you for your feedback!</p>
           </div>           
       </div>
    </div>  
</div>



//on hover
$(this).hover(function() {
    $(this).siblings().children('a').addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty');
    $(this).children('a').addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty');
    $(this).nextAll().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');

},function() {
    $(this).parent().children().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');}
});

Answer 1

更新2 ：将您的代码（悬停）与我的（重点）结合起来;完整代码on jsfiddle

var lock = false; // Prevents the hover from working when an element has focus

// Focus gain
$("a").focus(function() {
    lock = true;
    $(this).parent().siblings().children('a')
        .addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty');
    $(this).addClass('fivestar-btn-filled').removeClass('fivestar-btn-empty');
    $(this).parent().nextAll().children('a').removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');
});
// Focus lost
$("a").blur(function() {
    $(this).parent().siblings().children('a')
        .removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');
    $(this)
        .removeClass('fivestar-btn-filled').addClass('fivestar-btn-empty');
    lock = false;
});

在您的代码上，阻止悬停回调运行，在两者的开始时添加（回车和退出）：

if ( lock )
    return;

Answer 2

你想要CSS选择器：聚焦然后设置css样式，以便用户知道它们在它上面。

如何使用键盘焦点进行星级评定

2 个答案: