删除：将鼠标悬停在移动设备上

Question

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

我有一个下拉菜单，其样式已应用于: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桌面而不是移动设备中正常运行。 问题在于，由于:hover似乎已保留并导致下拉菜单项被“隐藏”，因此未触发onClick() 。

我以前找到了此解决方案，但现在在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桌面。

任何指针将不胜感激！

Answer 1

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

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

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

Answer 2

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

尝试添加此代码：）