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

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

Answer 1

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

为什么不在点击时添加一个与悬停风格相同的类呢？

Answer 2

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

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

CSS：

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