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'）、. trigger（'mouseenter'）和.trigger（'hover'），但它们不会将span元素更改为其悬停状态。

Answer 1

mouseover或mouseenter只会触发.on（“ mouseenter”）或.on（“ mouseover”）函数。 css悬停仅由指针激活

为什么不单击时添加与：hover样式相同的类？

Answer 2

就像Jorgedl所说的一样，我认为最好改班。

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

CSS：

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

jQuery-触发将鼠标悬停在单独的元素上

2 个答案: