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桌面而不是移动设备中应有的功能。问题是onClick()未被触发，因为:hover似乎保留了下来，并导致下拉菜单项被“隐藏”。

我以前找到了这个solution，但是现在在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;
 }
}

尝试添加此代码：）

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

2 个答案: