点击一个''a''元素，激发它的悬停处理程序，而不是去链接 [英] On click of an ''a'' element, fire it's hover handler instead of going to the link

问题描述

---

我正在使用一个不允许我编辑代码的CMS。 > 我有这个元素：

 < a href =/ development / tomato_site /title =SampleTitle
 class =menu_icon menu-641 sf-depth-1 menuparent>西红柿< / a> 
  

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

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

<这可能通过jQuery来完成吗？也许发出一个点击事件作为悬停事件？

解决方案

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

  $（'a '）.click（function（e）{
 e.preventDefault（）; 
 $（this）.trigger（'hover'）; 
}）; 
  

（这里我使用 a 作为如果当前悬停效果是通过CSS 来完成的话， ：悬停伪类，这将不会有理想的结果。

I am working with a CMS that doesn't allow me much to do in terms of editing their code.

---

I have this element:

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

When hovering over this link something pops up which is set through the CMS.

I want on clicking the element, the hover event to happen instead of going to the actual href link.

Is this possible to do via jQuery? Maybe dispatch a click event as a hover event?

解决方案

You can certainly prevent the default action of clicking and trigger the hover event instead, but I wouldn't recommend it due to accessibility and usability concerns.

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

(Here I'm using a as the selector but you probably want to be way more specific as to which links you are selecting.)

If the current hovering effect is done via CSS :hover pseudo-class, this will not have the desired outcome.

这篇关于点击一个''a''元素，激发它的悬停处理程序，而不是去链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！