Question

我试图使用jQuery模拟用鼠标悬停在元素上。

这与向元素添加:hover不同;我希望在功能上使用类似$(element).click()的功能，但是$(element).hover()并不适合我。

有问题的元素是（据我所知）使用jQuery UI datepicker和悬停工具提示;有关实际示例，请参阅an AirBnB listing，点击＆＃34;日期＆＃34;右侧的日历输入，并将鼠标悬停在可用日期之上。

我希望在每个可用日期触发悬停以使价格悬停在上方，但执行：

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

或只是

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

对我不起作用，也不使用mouseover()。知道我怎么能复制这种行为吗？

Answer 1

您应该尝试trigger - 事件：

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

另请查看此post on SO，看起来与您的非常相似。

Answer 2

嗯，你可以只用CSS做这个，这是一个简单的例子：

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

hover

但如果你坚持使用JavaScript，只需使用jQuery的$(".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>

pthread_exit()

模拟将鼠标悬停在元素

2 个答案: