Simulate Hover in jQuery

Question

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.

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

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

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

A similar question http://stackoverflow.com/questions/5169449/simulate-hover-using-jquery — DayTimeCoder, Jun 14 '12 at 19:00
Another duplicate http://stackoverflow.com/questions/1983169/hover-item-with-jquery — DayTimeCoder, Jun 14 '12 at 19:00
I'm not sure it's duplicate, the OP asked how to trigger a hover event, not how to create the event listener for hover — Eran Medan, Jun 17 '12 at 07:00

Selvakumar Arumugam · Answer 1 · 2012-06-14T18:28:46.163

Try mouseenter and mouseleave

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

From jQuery docs

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

DEMO: 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

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

DACrosby · Answer 2 · 2012-06-14T18:50:28.163

Shorthand set mouseenter/mouseleave events

$(".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

$(".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:

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

EDIT 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:

HTML

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

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;
    });
});

score 5 · Answer 3 · edited Jun 14 '12 at 18:02

5

See here

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

This should trigger the event

edited Jun 14 '12 at 18:02

gcochard

11,408
1
26
41

answered Jun 14 '12 at 17:56

Eran Medan

44,555
61
184
276

1

If he has used `$.fn.hover` then the correct method is `.mouseenter()` – Esailija Jun 14 '12 at 18:01
1

@Esailija - Good point but I checked and it seems that `mouseover` triggers also `mouseenter` (and vice versa) see here: http://jsfiddle.net/F4S2K/2/ – Eran Medan Jun 14 '12 at 18:13

score 0 · Answer 4 · answered Mar 28 '18 at 16:18

0

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

answered Mar 28 '18 at 16:18

Cameron

532
3
9

score -3 · Answer 5 · answered Jun 14 '12 at 18:07

-3

Write function on hover

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

answered Jun 14 '12 at 18:07

vijay

1,323
1
11
15

1

u r adding a listener to events, not triggering them – sv_in Jun 14 '12 at 18:21

Simulate Hover in jQuery

5 Answers5

Linked