JQuery - 触发悬停在单独的元素上答案

【问题标题】：JQuery - trigger hover over separate elementJQuery - 触发悬停在单独的元素上
【发布时间】：2018-07-10 18:48:42
【问题描述】：

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

示例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 元素更改为悬停状态。

【问题讨论】：

标签： jquery hover

【解决方案1】：

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

为什么不直接添加一个与 :hover 样式相同的点击类？

【讨论】：

我知道我可以添加一个类，我首先想看看我的问题是否可行，然后再解决它。现在看来不可能了，我就照你说的做，谢谢

【解决方案2】：

就像 Jorgedl 所说的那样，我认为换班会更好。

$(document).ready(function(){
  $('button').click(function() {
     $('.itemA').toggleClass('itemA hovered');
  });
});

CSS：

  .hovered {
        display:block;
        background: red;
        width: 40px;
        height: 40px;
    }

【讨论】：