Javascript 在 jQuery 中模拟悬停

Simulate Hover in jQuery

提问by yz10

Currently, I have some jQuery/Javascript code that toggles the css class 'ui-state-hovered' when a user hovers the mouse over certain elements, and I want to write a test in konacha to test this piece of code.

目前，我有一些 jQuery/Javascript 代码可以在用户将鼠标悬停在某些元素上时切换 css 类“ui-state-hovered”，我想在 konacha 中编写一个测试来测试这段代码。

How would I write this function in Javascript with the help of jQuery?

我将如何在 jQuery 的帮助下用 Javascript 编写这个函数？

Return true if when a user hovers over an element $('.someClass li:first'), the class 'ui-state-hovered' exists. Else return false.

如果当用户将鼠标悬停在元素 $('.someClass li:first') 上时，类 'ui-state-hovered' 存在，则返回 true。否则返回假。

How would I simulate a user hovering their mouse over that element?

我将如何模拟用户将鼠标悬停在该元素上？

回答by Selvakumar Arumugam

Try mouseenterand mouseleave

尝试mouseenter和mouseleave

$('.someClass li:first').mouseenter().mouseleave();

From jQuery docs

来自 jQuery 文档

Calling $(selector).hover(handlerIn, handlerOut)is shorthand for: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Calling$(selector).hover(handlerIn, handlerOut)是以下的简写：$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

DEMO:http://jsfiddle.net/skram/wh5N9/

演示：http : //jsfiddle.net/skram/wh5N9/

Try below to check for an class that would have added in hover

尝试在下面检查会在悬停中添加的类

$("#test").mouseenter(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
}).mouseleave(function() {
    console.log('Has class hover ' + $(this).hasClass('ui-state-hovered'));
})

Make sure the above is registered after .hover

确保在上面注册后 .hover

DEMO:http://jsfiddle.net/skram/wh5N9/2/

演示：http : //jsfiddle.net/skram/wh5N9/2/

回答by Eran Medan

See here

看这里

$('someClass li:first').mouseover();

This should trigger the event

这应该触发事件

回答by DACrosby

Shorthand set mouseenter/mouseleave events

速记设置 mouseenter/mouseleave 事件

$(".someClass li:first").hover(
  // Mouse Over
  function(){
    $(this).addClass("ui-state-hovered");
  },
  // Mouse Out
  function(){
    $(this).removeClass("ui-state-hovered");
});

EDIT

编辑

Set event mouseenter

设置事件鼠标输入

$(".someClass li:first").mouseenter(function(){
    $(this).addClass("ui-state-hovered");
  }

Set event mouseleave

设置事件 mouseleave

$(".someClass li:first").mouseleave(function(){
    $(this).removeClass("ui-state-hovered");
});

To simulate mouseover:

模拟鼠标悬停：

$(".someClass li:first").trigger("mouseenter");

To simulate mouseout:

模拟鼠标移出：

$(".someClass li:first").trigger("mouseleave");

To check for a class:

要检查类：

$(".someClass li:first").hasClass("ui-state-hovered");

To return true if has a class:

如果有一个类，则返回 true：

function checkClass(elem, class){
  return $(elem).hasClass(class);
};

EDIT 2

编辑 2

I've never use Konacha before, but if I were to take a stab at it using this guide at solitr.com as my guide, I'd say:

我以前从未使用过 Konacha，但如果我使用 solitr.com 上的本指南作为我的指南来尝试一下，我会说：

HTML

HTML

<div id="testDiv" class="foo">Some Text</div>

jQuery

jQuery

checkClass = function(elem, class){
    return $(elem).hasClass(class);
};

Konacha

科纳查

describe('checkClass', function() {
    it('should be true if elem has class', function() {
        checkClass("#testDiv", "foo").should.be.true;
        checkClass("#testDiv", "bar").should.be.false;
    });
});

回答by Cameron

using the console you could try $('#yourelement').trigger('mouseover');

使用控制台你可以试试 $('#yourelement').trigger('mouseover');

回答by vijay

Write function on hover

在悬停时编写函数

$('.someClass li:first').hover(function(){
      return $(this).attr('class').indexOf('ui-state-hovered') > -1;
});