在不更改鼠标位置的情况下从JS执行mouseover()

Question

我在div上，鼠标悬停后它改变了这里的内容，我如何在没有鼠标的情况下执行鼠标悬停，这是可能的？

鼠标悬停前的我的div：

<div id="divId" class="some_css_class" style="visibility: visible;">
<div style="visibility: hidden;">
      <p>Test</p>
   </div>
</div>

鼠标悬停后的我的div：

<div id="divId" class="some_css_class" style="visibility: visible;">
    <div style="visibility: visible;">
          <p>Test</p>
       </div>
    </div>

Answer 1

您可以使用触发器函数模拟事件，但在触发事件之前，您必须指定其函数

    $('#divId').on('mouseover', function(){
        $(this).find('>:first-child').css('visibility','visible');
    });
    // Line below triggers the event programmatically on load 
    $('#divId').trigger('mouseover');

看看这把小提琴以获得更多参考http://jsfiddle.net/Aerious/nLf90cyt/

Answer 2

您可以使用jQuery的mouseover()，但我认为如果您需要的不仅仅是css效果（比如编程隐藏div），模拟事件不是一个好方法。

如果有一个函数来切换div状态，并在您想要更改div的状态时调用它，则会更干净。

Answer 3

您可以使用.mouseover():

$('#divId').mouseover()

Answer 4

您可以使用.trigger（）

$('#divId').trigger('mouseover');

Answer 5

您应该尝试在没有JQuery的情况下使用"原生"Javascript。你可以试试这个：

var event = new Event('mouseover');
document.querySelector('#divId').dispatchEvent(event);

如果它按您的意愿工作，请给我反馈；）

Answer 6

您可以使用触发鼠标悬停事件

document.getElementById('divId').onmouseover();

此外，您还需要将div上mouseover事件的callback函数与id='divId'绑定，并在回调中更改div的可见性。

希望这能帮助