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

Question

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

---

我有这个元素：

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

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

我想点击元素，悬停事件发生而不是转到实际的 href链接。

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

Answer 1

jQuery的：

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

Answer 2

您当然可以阻止点击的默认操作并触发悬停事件，但由于可访问性和可用性问题，我不推荐。

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

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

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

Answer 3

使用以下脚本并触发hover事件

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