Remove object if hovered away with HTML/CSS-CodePudding

Currently I'm working on a website with a dropdown menu.
I want, that if you click on it, it appears, but if you hover away, it disappears until you click it again.

I have the following snippet for the HTML-part (The links are not implemented yet and the dropdown menu is only on the main page at the moment):

<div class='dropdown-project' id="project">
   <a class='dropbtn-project' href='#project'>Projects</a>
   <div class='dropcontent-project'>
      <a href="#">Project1</a>
      <a href="#">Project2</a>
   </div>
</div>

and this for the CSS-part:

.dropbtn-project {
  padding: 16px;
  border: none;
}

.dropdown-project {
    position: relative;
    display: inline-block;
}

.dropcontent-project {
  display: none;
  position: absolute;
  background-color: var(--main-header-background);
  min-width: 150px;
  z-index: 1;
}

.dropcontent-project a {
  padding: 5px 10px;
  display: block;
}

.dropcontent-project a:hover {
    color: var(--hover-fonts-color);
    background: var(--main-decor-color)
}

.dropdown-project:target .dropcontent-project {display: block;}

.dropdown-project:hover .dropbtn-project {background-color: var(--main-decor-color);}

.dropdown-project:not(:hover) .dropcontent-project {display: none;}

But with this I have the problem, that the target will stay after I clicked once, so it will reappear on hover after one click.

If you want to check it out, it's on https://www.mikecraft1224.tk.
(The text is in German, so "Projekte" is "projects" and "Projekt" is "project")

CodePudding user response：

add javascript functions to handle this.

Here I added two functions, one for adding class and another one for removing the class. and I give style to the class also

.active .dropcontent-project {display: block;}

when clicking on the a element, an active class is added to the project element. On mouse leave from the project element, the added class gets removed by calling the removeClass function.

function addClass() {
  var element = document.getElementById("project");
  element.classList.add("active");
}

function removeClass() {
  var element = document.getElementById("project");
  element.classList.remove("active");
}

.dropbtn-project {
  padding: 16px;
  border: none;
}

.dropdown-project {
    position: relative;
    display: inline-block;
}

.dropcontent-project {
  display: none;
  position: absolute;
  background-color: var(--main-header-background);
  min-width: 150px;
  z-index: 1;
}

.dropcontent-project a {
  padding: 5px 10px;
  display: block;
}

.dropcontent-project a:hover {
    color: var(--hover-fonts-color);
    background: var(--main-decor-color)
}

.active .dropcontent-project {display: block;}

.dropdown-project:hover .dropbtn-project {background-color: var(--main-decor-color);}

<div class='dropdown-project' id="project" onmouseleave="removeClass()">
   <a class='dropbtn-project' href='#project' onclick="addClass()" >Projects</a>
   <div class='dropcontent-project'>
      <a href="#">Project1</a>
      <a href="#">Project2</a>
   </div>
</div>

CodePudding user response：

I recommend that you make the link that you will use as a base for the dropdown in the HTML array as a container element and add the dropdown content inside it.

But if you still say you need to run it with this HTML structure, the following style codes will solve the problem.

.dropbtn-project {
  padding: 16px;
  border: none;
}

.dropcontent-project {
  transition: 0.2s ease-out;
  opacity: 0;
  pointer-events: none;
  background-color: var(--main-header-background);
  min-width: 150px;
  z-index: 1;
}

.dropcontent-project a {
  padding: 5px 10px;
  display: block;
}

.dropcontent-project a:hover {
    color: var(--hover-fonts-color);
    background: var(--main-decor-color)
}

.dropbtn-project:hover ~ .dropcontent-project,
.dropcontent-project:hover {
  opacity: 1;
  pointer-events: initial;
}