Emulate hovering over an element

Question

I'm trying to emulate hovering over an element with a mouse, using jQuery.

This is different from adding :hover to the element; I want something similar in function to using $(element).click(), however doing $(element).hover() doesn't work for me.

The element in question is (as far as I can see) using the jQuery UI datepicker with a tooltip on hover; for a live example, see an AirBnB listing, click the "dates" calendar input on the right hand side and hover over an available date.

I want to trigger the hover over each available date to get the price to hover above, although doing:

$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)').each(function(){
  $(this).hover()
})

or simply

$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)')[0].hover()

doesn't work for me, nor does using mouseover(). Any idea how I can replicate this behaviour?

`hover()` isn't a single event, it's two events - `mouseenter` and `mouseleave` - and therefore has no parameter-less trigger method. Try `$(this).mouseenter()` instead. — Rory McCrossan, Apr 04 '16 at 07:49
Tried this, although sadly doesn't work in this instance. You can test it on the linked website with `$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').trigger('mouseenter');` — JVG, Apr 04 '16 at 07:53
@Jascination: You mean you need it to work **specifically** on the AirBnB site? Your question doesn't make that clear, it just cites it as an example. If you need that, you need to create an [mcve] replicating what you need **in** the question, as questions cannot rely on off-site content to be meaningful (as off-site content rots, making the question useless to others in the future). — T.J. Crowder, Apr 04 '16 at 08:03
@T.J.Crowder Alright, I'll delete and post again with that in mind. — JVG, Apr 04 '16 at 08:12

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

You should try trigger-ing the event:

$("element").trigger('mouseenter');

Also look at this post on SO, looks very similar to yours.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 04 '16 at 07:52

zedling

638
8
28

Good suggestion, however this doesn't work in AirBnB's case. See the website linked above, open up the "check in" datepicker and try `$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').trigger('mouseenter');` – JVG Apr 04 '16 at 07:55
I saw you edited the callback error, but now you left out the first() ;) try: `$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').first().trigger('mouseenter');` Anyway i cant keep the datepicker open to test the script in from the console, so you'll have to do the testing. – zedling Apr 04 '16 at 08:02
The `:eq(0)` at the end of the selector negates the need for a `first()` :) but as you can see on the example page, this does not work. Seems like it's watching for something other than mouseenter? – JVG Apr 04 '16 at 08:04

score 0 · Answer 2 · answered Apr 04 '16 at 08:01

Well, you can do this just with CSS, here's a simplified example:

.td-hover td {
  position: relative;
  width: 1em;
  border: 1px solid #ddd;
}
.on-hover {
  display: none;
  position: absolute;
  top: -1.5em;
  left: -1em;
  background: #eee;
  border: 1px solid black;
}
.td-hover td:hover .on-hover {
  display: inline-block;
}

<table class="td-hover">
  <tbody>
    <tr>
      <td>1<span class="on-hover">one</span></td>
      <td>2<span class="on-hover">two</span></td>
      <td>3<span class="on-hover">three</span></td>
      <td>4<span class="on-hover">four</span></td>
      <td>5<span class="on-hover">five</span></td>
      <td>6<span class="on-hover">six</span></td>
      <td>7<span class="on-hover">seven</span></td>
    </tr>
    <tr>
      <td>8<span class="on-hover">eight</span></td>
      <td>9<span class="on-hover">nine</span></td>
      <td>10<span class="on-hover">ten</span></td>
      <td>11<span class="on-hover">eleven</span></td>
      <td>12<span class="on-hover">twelve</span></td>
      <td>13<span class="on-hover">thirteen</span></td>
      <td>14<span class="on-hover">fourteen</span></td>
    </tr>
  </tbody>
</table>

But if you insist on using JavaScript instead, just use jQuery's hover to add/remove a class:

$(".td-hover td").hover(
  function() {
    $(this).find(".on-hover").addClass("showing");
  },
  function() {
    $(this).find(".on-hover.showing").removeClass("showing");
  }
);

.td-hover td {
  position: relative;
  width: 1em;
  border: 1px solid #ddd;
}
.on-hover {
  display: none;
  position: absolute;
  top: -1.5em;
  left: -1em;
  background: #eee;
  border: 1px solid black;
}
.on-hover.showing {
  display: inline-block;
}

<table class="td-hover">
  <tbody>
    <tr>
      <td>1<span class="on-hover">one</span></td>
      <td>2<span class="on-hover">two</span></td>
      <td>3<span class="on-hover">three</span></td>
      <td>4<span class="on-hover">four</span></td>
      <td>5<span class="on-hover">five</span></td>
      <td>6<span class="on-hover">six</span></td>
      <td>7<span class="on-hover">seven</span></td>
    </tr>
    <tr>
      <td>8<span class="on-hover">eight</span></td>
      <td>9<span class="on-hover">nine</span></td>
      <td>10<span class="on-hover">ten</span></td>
      <td>11<span class="on-hover">eleven</span></td>
      <td>12<span class="on-hover">twelve</span></td>
      <td>13<span class="on-hover">thirteen</span></td>
      <td>14<span class="on-hover">fourteen</span></td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Emulate hovering over an element

2 Answers2