jquery - 使用鼠标单击或鼠标悬停显示和隐藏内容

Question

我有一个按钮并将其放置在浏览器的顶部。所以我需要在这个定位按钮上单击鼠标或鼠标悬停时显示一个下拉列表。

HTML

  <div class="translator">
    <div class="translate-btn">Translator</div>
    <div class="translate-dropdown">
      <select>
        <option>Translate-1</option>
        <option>Translate-2</option>
        <option>Translate-3</option>
      </select>
    </div>
  </div>

CSS

.translator {
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 9999;
}

.translate-btn {
  background-color: rgba(136, 121, 91, 0.8);
  border-radius: 0 0 5px 5px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 15px 5px;
  text-align: center;
  text-transform: uppercase;
}

使用此 HTML，我需要在用户单击或将鼠标悬停在“translate-btn”上时显示“translate-dropdown”DIV。

谁能告诉我纯 CSS 是否可行，或者我是否需要为此使用 jquery？

希望有人能帮帮我。谢谢。

Answer 1

仅使用 CSS:

.translate-dropdown {
    display: none;
}

.translator:hover .translate-dropdown {
    display: block;
}

完整的工作示例:

.translator {
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 9999;
}

.translate-btn {
  background-color: rgba(136, 121, 91, 0.8);
  border-radius: 0 0 5px 5px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 15px 5px;
  text-align: center;
  text-transform: uppercase;  
}

.translate-dropdown {
    display: none;
}

.translator:hover .translate-dropdown {
    display: block;
}

  <div class="translator">
    <div class="translate-btn">Translator</div>
    <div class="translate-dropdown">
      <select>
        <option>Translate-1</option>
        <option>Translate-2</option>
        <option>Translate-3</option>
      </select>
    </div>
  </div>