时间戳

首页 > 解决方案 > 移除 :hover 在移动设备上

javascript - 移除 :hover 在移动设备上

问题描述

我很欣赏这个问题的答案，但我还没有找到适合我的解决方案。

我有一个应用了样式的下拉菜单:hover，在移动视口中，由于明显的原因，这不应该适用。

下拉菜单的结构类似于：

<div className={ styles.dropdownWrapper }>
        <span className={ styles.dropdownLabel }>{ label }</span>
        <object className={ styles.dropdownArrow }></object>
        <div className={ styles.dropdownOptions }>
            <div className={ styles.dropdownItem }>
                <span>Settings</span>
            </div>
            <div className={ styles.dropdownItem }>
                <span onClick={ () => console.log("logout") }>Logout</span>
            </div>
        </div>
    </div>

带样式：

.dropdownWrapper {
  display: flex;
  height: 100%;
  align-items: center;
  cursor: pointer;
}

.dropdownOptions {
  display: none;
}

.dropdownItem {
  padding: 0.4em;
}

.dropdownItem hr {
  border: 0;
  height: 1px;
  background: #979797;
  margin: 0;
}

.dropdownWrapper:hover .dropdownOptions {
  top: 100%;
  display: block;
  position: absolute;
  padding: 1em 1em 0.5em 1em;
  background-color: #36394f;
  border-radius: 2px;
  min-width: 100px;
}

.dropdownArrow {
  padding-left: 0.5em;
  height: 24px;
  width: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inline("./downArrow.svg");
}

@media only screen and (max-width: 768px) {
  .dropdownOptions {
    display: block;
    position: relative;
  }

  .dropdownArrow, .dropdownHr {
    display: none;
  }
}

上面的代码在 Firefox 桌面版和移动版、Chrome 桌面版而不是移动版中的功能应有尽有。问题是onClick()没有被解雇，因为:hover似乎被保留并导致下拉项目被“隐藏”。

我之前找到了这个解决方案，但现在在 Firefox 桌面版中已经贬值了。

我的下一个解决方案是按如下方式更新 css：

@media (hover: hover) {
  .dropdownWrapper:hover .dropdownOptions {
    top: 100%;
    display: block;
    position: absolute;
    padding: 1em 1em 0.5em 1em;
    background-color: #36394f;
    border-radius: 2px;
    min-width: 100px;
  }
}

这修复了 Chrome 移动问题，但不适用于 Firefox 桌面。

任何指针将不胜感激！

标签： javascriptcsshovercross-browser

解决方案

您应该考虑使用移动优先策略。它包括将 CSS 规则应用于移动设备，并为更大的屏幕覆盖它们（或添加一些）。

这样，您应该为移动设备定义 CSS 规则，然后使用媒体查询来定位更大的屏幕

@media only screen and (min-width: 769px) { }

推荐阅读