如何将：悬停和单击事件同时添加到元素？答案

【问题标题】：How to add :hover and click event to element same time?如何将：悬停和单击事件同时添加到元素？
【发布时间】：2018-08-31 18:39:59
【问题描述】：

当我悬停父元素时，他的孩子出现了。当我单击父元素时，他的孩子也会出现，当我再次单击它时，他的孩子会消失。但是然后（在单击父元素消失的孩子之后）当我悬停父元素时，他的孩子没有出现。为什么？

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  if (children.style.display == 'block') {
    children.style.display = 'none';
  } else {
    children.style.display = 'block';
  }
});

nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

  <body>
    <nav>
      <ul>
        <li><a href="#">Parent</a>
          <ul>
            <li><a href="#">child</a></li>
            <li><a href="#">child</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

谢谢。

【问题讨论】：

JavaScript 为覆盖样式表的元素添加内联样式
问题是当你直接在元素上设置css属性时，它的特异性大于样式。

标签： javascript css pseudo-class dom-events

【解决方案1】：

点击父类时切换类更容易。

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function() {
  children.classList.toggle("showIt");
});

nav>ul>li>ul {
  display: none;
}

nav>ul>li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

.showIt {
  display: block;
}

<body>
  <nav>
    <ul>
      <li><a href="#">Parent</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

【讨论】：

【解决方案2】：

您可以通过将children.style.display 设置为空字符串 轻松避免这种情况，而不是在您想要隐藏子项时将none 分配给它。

编辑：

需要更正：需要将空字符串分配给 children.style.display 而不是 undefined 以删除覆盖（请参阅斜体标记的文本 - 我必须更正）。

代码 sn-p 应该是这样的：

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  alert(children.style.display);
  if (children.style.display == 'block') {
    children.style.display = '';
  } else {
    children.style.display = 'block';
  }
}, true);

【讨论】：

关键是给children.style.display分配一个显式值会覆盖CSS定义。取消设置此值（即设置为未定义）会删除此覆盖。
所以，请复制询问代码并创建一个 sn-p 显示它的工作原理。你可以edit你的答案并点击<>。工作 sn-ps 区域奖金通常会为您赢得更多支持
@Calvin Nunes：不过，感谢您的提示。我已经采纳了您的建议 - 并且我自己很快就遇到了代码问题。
是的，我知道 undefined 不起作用，这就是为什么我鼓励 sn-p，零长度字符串会起作用，因为您现在编辑了答案。所以，知道我会支持你

【解决方案3】：

使用基本的编程组合

$('#target').on('click mouseover', function () {
// Do something for both
});

【讨论】：

如果你可以用 CSS 来做鼠标悬停，那就太过分了。