どのように私は、アンカータグのいずれかにマウス「ホバー」イベントをトリガしようとしている

Question

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #0000FF; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown a:hover { 
 
    background-color: #ff0000 
 
} 
 
.show { 
 
    display: block;

<div class="dropdown"> 
 
    <button id="myButton" onclick="PrintHello()" class="dropbtn">click</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a class="link" id="Home" href="#home">Home</a> 
 
    <a class="link" id="About1" href="#about">About</a> 
 
    <a class="link" id="Contact" href="#contact">Contact</a> 
 
    </div> 
 
</div>

ドロップダウンリストのアンカータグにマウスホバーイベントをトリガしたときに、メニューのポップアップドロップダウン、

私はそれがすべてのイベントをトリガdoesntの

$("#About1").trigger('hover'); 

を使用しています。私は "ホバー"イベントのためのアンカータグのためのいくつかのイベントハンドラを書いています。 $("#About1").trigger('mouseover');を使用すると、イベントハンドラが呼び出されますが、ウェブページにはホバー効果は表示されません。私はそれが物理的にマウスをその上に置いたときと同じようにぶら下げられることを期待していました。 私に何かが不足していますか？イベントをトリガーすることによってそのような効果を作り出すことは可能でしょうか？提案してください。

Answer 1

あなただけhover()DEMO

$('button, #myDropdown').hover(function() { 
    $('#myDropdown').toggleClass('show'); 
}) 

使用するかは、スタイルを変更しようとした場合、あなたは要素DEMO

$('#About1').mouseenter(function() { 
    $(this).trigger('customEvent'); 
}); 

$('#About1').on('customEvent', function() { 
    alert('Lorem Ipsum'); 
}); 

Answer 2

上（のMouseEnter）にカーソルを移動するときにカスタムイベントをトリガすることができますセレクタ:hoverをCSSで使用する方が良いでしょう。あなたは何も他の使用ホバーが必要な場合は

：あなたがアイテムドロップダウン上でマウスホバーイベントをトリガしたい場合$('selector').hover(functionOnHover,FunctionOnHoverOut);

Answer 3

は、例えば、「約」は、物理的にその上にマウスを移動せずに、あなたは追加することができますように

$(document).ready(function(){ $("#About1").trigger('mouseenter'); });

DEMO