单击“a”元素时，触发它的悬停处理程序，而不是转到链接

Posted 2023-05-08

【中文标题】单击“a”元素时，触发它的悬停处理程序，而不是转到链接

【英文标题】：On click of an ''a'' element, fire it's hover handler instead of going to the link

【发布时间】：2014-10-02 06:45:02

【问题描述】：

我正在使用的 CMS 不允许我在编辑其代码方面做太多事情。

---

我有这个元素：

<a href="/development/tomato_site/" title="SampleTitle"
 class="menu_icon menu-641 sf-depth-1 menuparent" > Tomatos </a>

将鼠标悬停在此链接上时，会弹出一些通过 CMS 设置的内容。

我希望在单击元素时发生悬停事件，而不是转到实际的 href 链接。

这可以通过 jQuery 实现吗？也许将点击事件作为悬停事件发送？

【问题讨论】：

hover是CSS还是js设置的？

您可以调度事件并做很多其他事情，但首先您必须找出触发此弹出窗口的确切原因，是 CSS、javascript、jQuery 等

所以我不能只在点击元素时模拟悬停事件？

【参考方案1】：

jQuery:

$( 'whatever selects your link' ).on( 'click', function( ev )
    ev.preventDefault(); // stop click event
    $( this ).trigger( 'hover' );
 );

【参考方案2】：

您当然可以阻止默认的点击操作并触发悬停事件，但出于可访问性和可用性方面的考虑，我不建议这样做。

$('a').click(function(e) 
    e.preventDefault();
    $(this).trigger('hover');
);

（这里我使用a 作为选择器，但您可能希望更具体地了解您选择的链接。）

如果当前的悬停效果是通过 CSS :hover 伪类完成的，这将不会有预期的结果。

【讨论】：

我想知道当用户点击元素时 ipad 上会发生什么...

【参考方案3】：

使用下面的脚本并触发hover事件

$( '.menu_icon' ).click(function()
 $(this).trigger('hover');
 return false;
);