如何在下拉列表的锚标签上触发鼠标悬停事件答案

【问题标题】：How to trigger mouse hover event on anchor tags of drop down list如何在下拉列表的锚标签上触发鼠标悬停事件
【发布时间】：2016-05-10 10:56:34
【问题描述】：

.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>

当下拉菜单弹出时，我正在尝试在其中一个锚标记上触发鼠标“悬停”事件，

我正在使用：

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

它不会触发任何事件。我已经为“悬停”事件的锚标记编写了一些事件处理程序。当我使用时：

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

它调用事件处理程序，但在网页上看不到悬停效果。我期待它的悬停与您将鼠标实际悬停在其上时一样。我错过了什么吗？是否可以通过触发事件来创建这样的效果？请提出解决方案。

【问题讨论】：

hover 是 mouseenter 和 mouseleave 的简化事件。

标签： javascript html jquery css jquery-events

【解决方案1】：

你可以用hover()DEMO

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

或者您可以在将鼠标悬停在元素 DEMO 上时触发自定义事件

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

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

【讨论】：

我们可以自动将鼠标悬停在锚标签上吗？
不确定automate 是什么意思？
我们可以在不将鼠标实际悬停在其上的情况下，在主页、关于、联系人等下拉项目上触发鼠标悬停事件吗？
只需将选择器 #About 更改为 #myDropdown a
所以你想从你的css中触发:hover规则，用js处理其他一些事件。我认为这是不可能的，相反，您可以将 css 规则放在一个类中并 toggleClass jsfiddle.net/Lg0wyt9u/791 或 jsfiddle.net/Lg0wyt9u/792

【解决方案2】：

如果您只尝试更改样式，最好在 css 中使用选择器 :hover。

如果您需要其他任何内容，请使用悬停：$('selector').hover(functionOnHover,FunctionOnHoverOut);

【讨论】：

【解决方案3】：

如果您想在下拉项目（例如“关于”）上触发鼠标悬停事件而不将鼠标实际悬停在其上，您可以添加

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

DEMO

【讨论】：