如何在悬停时打开和关闭此下拉菜单

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>

希望这会对您有所帮助。

Answer 2

您的代码不完整。但是，我可以举一个简单的例子。

主要思想是，当光标移到display: none之外时，将dropdown-content中的dropdownbtn设置为dropdown-content。当光标悬停在其上时，将display: block设置为.dropbtn { background-color: #ccc; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { 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; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #aaa;}。

<div class="dropdown">
  <button class="dropbtn">Menu</button>
  <div class="dropdown-content">
    <a href="#">One Link</a>
    <a href="#">Another Link</a>
    <a href="#">Yet Another Link</a>
  </div>
</div>

 StorageReference storageReference = FirebaseStorage.getInstance().getReference();

                final StorageReference ref = storageReference.child("folder_name_of_firebse_storage/" + UUID.randomUUID().toString());


                UploadTask uploadTask = ref.putFile(your_image_uri_which_need_to_be_uploaded);

                Task<Uri> urlTask = uploadTask.continueWithTask(new Continuation<UploadTask.TaskSnapshot, Task<Uri>>() {
                    @Override
                    public Task<Uri> then(@NonNull Task<UploadTask.TaskSnapshot> task) throws Exception {
                        if (!task.isSuccessful()) {
                            throw task.getException();
                        }

                        // Continue with the task to get the download URL
                        return ref.getDownloadUrl();
                    }
                }).addOnCompleteListener(new OnCompleteListener<Uri>() {
                    @Override
                    public void onComplete(@NonNull Task<Uri> task) {
                        if (task.isSuccessful()) {
                            Uri downloadUri = task.getResult();




                            //this is the uri you needed... 


                      uploaded_image_url = downloadUri.toString();



                        } else {
                            // Handle failures
                            // ...
                            Toast.makeText(EditUserProfile.this, "Image uploading failed ", Toast.LENGTH_SHORT).show();


                    }
                });