javascript - 如何使这个下拉菜单在悬停时打开和关闭

Question

我想在将鼠标悬停在其上时打开此下拉菜单。我试图用 onclick 命令打开这个下拉菜单，但我没有完全成功，所以我决定在悬停时制作下拉菜单。

CSS:

.dropdown-menu {
  left: -50px;
  min-width: 40px;
}

.custom-menubutton {
  position: absolute;
  top:0px;
  right: 40px;
  cursor: pointer;
  padding: 10px;
  height:50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-menubutton:hover {
  background-color:#F0EEEE;
}

.custom-menu-cont {
  position: relative;
}

.custom-menu-cont.hidden {
  display: none;
}

.custom-menu-cont-shown {
  display: inline-block;
}

.custom-menu {
  min-height: 350px;
  width: 327px;
  position: absolute;
  border: 1px solid #bfbfbf;
  border-top: none;
  right: 40px;
  top: 0px;
  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.176);
  background-color: white;
  padding:28px;
}

.arrow-up {
  width: 7px;
  height: 7px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid white;
  position: absolute;
  right:17px;
  top:-7px;
}

.custom-menu-cont {
  z-index: 3;
}
.custom-menu-item {
  border: 1px solid white;
  display: inline-block;
  width: 87px;
  padding: 10px 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.custom-menu-item a {
  color: #737373;
  text-decoration: none;
  outline: none;
}

.custom-menu-item img {
  display: block;
  margin: 0 auto 5px auto;
  height: auto;
  width: auto;
  max-height: 50px;
  max-width: 60px;
}

.custom-menu-item p {
  height:28px;
  margin:0px;
}

.custom-menu-item:hover {
  border:1px solid #e7e7e7;
}

.custom-menubutton-color {
  background-color: #e7e7e7;
}

HTML:

<div class="custom-menubutton">
      <i class="glyphicon glyphicon-th" style="font-size:20px;"></i>
    </div>
  </div>
  <div class="custom-menu-cont hidden">
    <div class="custom-menu">
      <div class="arrow-up"></div>
      <div>
        <div class="custom-menu-item">
          <a href="http://blog.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}"></div>
          <p class="custom-title">Blogs</p></a>
        </div>
        <hr style="margin-bottom: 10px; margin-top: 10px;">
        <div class="custom-menu-item">
          <a href="https://susper.com/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}" style="width: 60px;height: 16px;"></div>
          <p class="custom-title">Susper</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://chat.susi.ai/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}"></div>
          <p class="custom-title">Susi</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://loklak.org/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}"></div>
          <p class="custom-title">loklak</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://phimp.me/" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}"></div>
          <p class="custom-title">Phimp.me</p></a>
        </div>
        <div class="custom-menu-item">
          <a href="https://pslab.fossasia.org" target="_blank">
          <div class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}"></div>
          <p class="custom-title">PS Lab</p></a>
        </div>
        <hr style="margin: 10px">
        <div style="display: flex;justify-content: center;align-items: center; margin: 0 0 -20px 0">
          More on&nbsp;<a href="https://labs.fossasia.org/" target="_blank" style="text-decoration: none;color: #737373"> labs.fossasia.org</a>
        </div>
      </div>
    </div>
  </div>

如何实现？

Answer 1

CSS:

.menuBtn
{
    background-color: #ccc;
    color: #fff;
    padding: 10px 50px;
    font-size: 16px;
    border: none;
}
.custom-menu 
{
    position: relative;
    display: inline-block;
}
.custom-menu-item
{
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.custom-menu:hover .custom-menu-item 
{
    display: block;
}
.custom-menu-item a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}           
.custom-menu-item a:hover
{
    background-color: #e7e7e7;
}
.custom-menu:hover .menuBtn 
{
    background-color: #aaa;
}

HTML:

<div class="custom-menu">
            <button class="menuBtn">Menu</button>
            <div class="custom-menu-item">
                <a href="http://blog.fossasia.org" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='blog.png') }}">
                    </span>
                    <span class="custom-title">Blogs</span></a>
                <hr style="margin-bottom: 10px; margin-top: 10px;">
                <a href="https://susper.com/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='susper.png') }}">
                    </span>
                    <span class="custom-title">Susper</span></a>
                <a href="https://chat.susi.ai/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='susi.png') }}">
                    </span>
                    <span class="custom-title">Susi</span></a>
                <a href="https://loklak.org/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='loklak.png') }}">
                    </span>
                    <span class="custom-title">loklak</span></a>
                <a href="https://phimp.me/" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='phimp.png') }}">
                    </span>
                    <span class="custom-title">Phimp.me</span></a>
                <a href="https://pslab.fossasia.org" target="_blank">
                    <span class="custom-icon"><img src="{{ url_for('static', filename='Pslab.png') }}">
                    </span>
                    <span class="custom-title">PS Lab</span></a>
                <hr style="margin: 10px">
            <div>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;More on</span><a href="https://labs.fossasia.org/" target="_blank">labs.fossasia.org</a>
            </div>
        </div>
    </div>

希望对您有所帮助。