用鼠标点击或鼠标悬停显示和隐藏内容

Question

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

  <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，我需要显示“翻译-下拉”DIV当用户点击或鼠标对“翻译-btn”。

有人能告诉我是否可以使用纯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>

​

Answer 2

纯CSS对于这类任务具有局限性。下面是使用jQuery的javascript方法(因为我不是CSS开发人员)：

$(document).ready(function() {
        var $target = $('.translate-dropdown');
        $('div.translate-btn').on({ 
                    mouseenter: function(e){
                        $target.css('visibility', 'hidden');     
                    },
                    mouseleave:function(e){
                        $target.css('visibility', 'visible');  
                    },
                   click:function(e){

                   $target.css('visibility', 'visible');
// here you can toggle a class name to track the state of the div and based on the state hide or show it. 

                    }
                });
        }

您可以使用jQuery、.hide()和.show()，而不是.css()，但是这些设置将设置CSS display: none，而这并不总是隐藏元素的目标。