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

Question

简单的问题 - 当我从另一个元素触发某个元素时，如何使该元素看起来悬停？

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;
        }

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

Answer 1

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

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