Question

我正在尝试在list元素上使用焦点事件。它正在悬停，但没有焦点！你有什么想法吗？

$('#main-menu ul.rubriques li')
.hover(function() {
$(this).addClass('active').find('ul').show();                    
})
.focus(function() {
$(this).addClass('active').find('ul').show();                    
});

我尝试修改我的代码：找到解决方案;）;）;）

  $('#main-menu ul.rubriques li a')
.hover(function() { $(this).parent().addClass('active').find('ul').show();                   
})
.focus(function() { $(this).parent().addClass('active').find('ul').show();                   
});

谢谢！大家好！

Answer 1

重点关注<input/>元素和<a/>链接......

Answer 2

只有inputs，textareas和anchors可以获得焦点。

此外，您在)部分

之后错过了hover()

$('#main-menu ul.rubriques li').hover(function() {
    $(this).addClass('active').find('ul').show();                    
}).focus(function() {
    $(this).addClass('active').find('ul').show();                    
});

更新 - 正如@vittore指出的那样，如果您指定li

，tab-index可以获得焦点

Answer 3

您也可以一次绑定两个事件：

$('#main-menu ul.rubriques li').bind('hover focus', function() {
    $(this).addClass('active').find('ul').show();                    
});

但是像michelgotta所说，除了在某些情况下，重点不太可能对李有用 - http://api.jquery.com/focus/

Answer 4

您需要更改Geoff所假设的处理程序的方式，您还需要为列表项显式设置tab-index属性，以便允许它们触发焦点事件

Answer 5

焦点是一个只在输入字段等表单元素上使用的函数，例如，如果我没记错的话。

http://api.jquery.com/focus/

你想做什么？

如果您要使用li元素做某事;

$('#main-menu ul.rubriques li').hover(function() {
  $(this).addClass('active').find('ul').show().css({'border':'1px solid #ff2200','background-color':'#ffcc00'});
});

您可以将颜色更改为您想要的颜色。那是你最好的选择。

Answer 6

我尝试修改我的代码：找到解决方案;）;）;）

  $('#main-menu ul.rubriques li a')
.hover(function() { $(this).parent().addClass('active').find('ul').show();                   
})
.focus(function() { $(this).parent().addClass('active').find('ul').show();                   
});

谢谢！大家好！

jQuery结合焦点和悬停

6 个答案: