首页 > 解决方案 > JQuery - 触发悬停在单独的元素上

问题描述

一个简单的问题——当我从另一个元素触发一个元素时,如何让它看起来像是悬停的?

示例 jsfiddle:http: //jsfiddle.net/xpvt214o/391305/

身体:

<span class="itemA"></span>
<button>
TriggerAHover
</button>

JS:

   $(document).ready(function(){
    $('button').on("click", function(){
      $('.itemA').trigger('mouseover');
    })
    });

CSS:

   .itemA {
     display:block;
            background: blue;
            width: 40px;
            height: 40px;
        }

        .itemA:hover {
            background: red;
        }

这个小提琴创建了一个蓝色的背景跨度。悬停时,跨度变为红色。
我希望跨度也可以在单击按钮时变为悬停状态。我尝试过 .trigger('mouseover')、.trigger('mouseenter') 和 .trigger('hover'),但它们不会将 span 元素更改为悬停状态。

标签: jqueryhover

解决方案


mouseover 或 mouseenter 只会触发 .on("mouseenter") 或 .on("mouseover") 函数。CSS 悬停仅由指针激活

为什么不直接在单击时添加一个与 :hover 样式相同的类?


推荐阅读