Emulate hovering over an element

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?

Answers 1

  • 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>


Related Articles