如何在keydown上删除悬停类?

时间:2016-03-04 10:56:18

标签: javascript jquery

请告诉我如何在keydown上删除悬停类。我执行以下步骤

1)将第二个项目悬停。它将悬停类应用于第二个项目" b"

现在如果用户按下keydown事件代码40。它会从元素中删除悬停类吗?我如何从keydown事件中删除悬停类?

demo

 $(function() {
     $('#main-menu').on({
         mouseenter: function() {
             console.log("mouse over")
         },
         mouseleave: function() {
             console.log("mouse leave")
         }
     });



 })

 $(document).on('keyup', function(event) {

     if (event.which == 40) { // 40 is Array key down event code
         console.log('remove focus or hover from selected item ');

     }
 })

1 个答案:

答案 0 :(得分:1)

  

你能否告诉我如何在keydown上删除悬停类

悬停不是一个类,你需要制作一个并在mousenter和mouseleave上添加/删除它。

试试这个fiddle

$('#main-menu').on("mouseenter", "li", function() {
    $( this ).addClass( "hover" ); 
});
$('#main-menu').on("mouseleave", "li", function() {
    $( this ).removeClass( "hover" ); 
});

$(document).ready( function(){

    $( "li" ).first().focus();

    $(document).keydown(function () {
        console.log(event.which);
        if(event.which==40)
        {
            console.log('remove focus or hover from selected item ');
            $( "li.hover" ).removeClass( "hover" ).next().addClass( "hover" );
        }
    });

} );