模拟悬停在元素上答案

【问题标题】：Emulate hovering over an element模拟悬停在元素上
【发布时间】：2016-04-04 07:46:52
【问题描述】：

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

这与在元素中添加:hover 不同；我想要在功能上与使用 $(element).click() 类似的东西，但是使用 $(element).hover() 对我不起作用。

有问题的元素是（据我所知）使用带有悬停工具提示的 jQuery UI 日期选择器；对于一个实时示例，请参阅an AirBnB listing，单击右侧的“日期”日历输入并将鼠标悬停在可用日期上。

我想触发悬停在每个可用日期上以使价格悬停在上方，尽管这样做：

$('.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() 也不起作用。知道如何复制这种行为吗？

【问题讨论】：

hover() 不是单个事件，而是两个事件 - mouseenter 和 mouseleave - 因此没有无参数触发方法。请改用$(this).mouseenter()。
试过了，虽然很遗憾在这种情况下不起作用。您可以在链接的网站上使用$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').trigger('mouseenter'); 进行测试
@Jascination：您的意思是您需要它专门在 AirBnB 网站上工作？你的问题没有说清楚，它只是引用它作为一个例子。如果您需要，您需要创建一个minimal reproducible example 复制您在in 问题中需要的内容，因为问题不能依赖于场外内容才有意义（因为场外内容腐烂，使以后对别人没用的问题）。
@T.J.Crowder 好的，考虑到这一点，我将删除并再次发布。

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

您应该尝试trigger-ing 活动：

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

也看看这个post on SO，看起来和你的很相似。

【讨论】：

好建议，但是这不适用于 AirBnB。查看上面链接的网站，打开“签入”日期选择器并尝试$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').trigger('mouseenter');
我看到你编辑了回调错误，但现在你忽略了 first() ;) 尝试：$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable):eq(0)').first().trigger('mouseenter'); 无论如何我不能保持打开日期选择器以从控制台测试脚本，所以你'必须做测试。
选择器末尾的:eq(0) 不需要first() :) 但正如您在示例页面上看到的那样，这不起作用。好像它正在监视 mouseenter 以外的东西？

【解决方案2】：

嗯，你可以只用 CSS 来做到这一点，这里有一个简化的例子：

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

但如果你坚持使用 JavaScript 代替，只需使用 jQuery 的 hover 来添加/删除一个类：

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

【讨论】：