Delete an item upon hover-out using HTML and CSS

Currently, I am in the process of developing a website that features a dropdown menu.
I would like it so that when you click on the menu, it appears, but if you move your cursor away from it, it disappears until you click on it again.

Below is the HTML snippet I have for this feature (please note that the links are placeholders and the dropdown menu is only available on the main page at this time):

<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 here is the corresponding CSS code:

.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;}

However, I am facing an issue where the target remains active after a single click, causing the menu to reappear on hover after the initial click.

If you would like to view this feature, please visit .
(Kindly note that the text on the website is primarily in German, so "Projekte" translates to "projects" and "Projekt" translates to "project")

htmlcss

Answer №1

To enhance the functionality of your dropdown menu, I suggest embedding the link that serves as the base within an HTML container element and inserting the dropdown content inside.

If for any reason you prefer sticking to the current HTML structure, implementing the following CSS styles will effectively address the issue:

.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;
}

Answer №2

Implement JavaScript functions to manage the behavior.

Two functions have been included - one for adding a class and another for removing it. Additionally, a style has been applied to the class as well.

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

By clicking on the a element, an active class is assigned to the project element. Upon exiting the project element, the added class is removed using 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing external HTML code from conflicting with CSS styles

One of the challenges I'm facing on my website is displaying HTML email content. Some of the emails contain CSS that messes up my site layout, causing certain elements to overlap each other. For example, a toolbar at the top of the page might cover i ...

htmlcsshaml

Changing the color of a select HTML element in Google Chrome

I have encountered an issue while trying to display a drop-down list in HTML. Despite successfully achieving this in Internet Explorer, I am facing a problem when using Google Chrome. To style the background color of the options in the select tag, I have ...

htmlgoogle-chromecolorshtml-select

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

javascripthtmljquerycheckboxinput-field

Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this: <ul> <li id="projectrow_364"> <span>Forest</span> </li> <li id="projectrow_365"> <span>Life</span> ...

jquerycss

Discovering the method to extract text from an element within a search result with Selenium Webdriver

Struggling to extract a URL from Tripadvisor.com's search results using its element, my attempts have proven futile so far. Check out the code snippet below: from selenium.webdriver.common.keys import Keys from selenium import webdriver from seleniu ...

pythonhtmlselenium

When placed in an absolute position, Overflow seems to be malfunctioning

Within a div that is positioned relatively, there is another div positioned absolutely. Despite setting overflow:hidden and border-radius on the main div, the inner div's edges are not contained within the main one, indicating that the overflow proper ...

htmlcss

I am interested in setting up a flickr gallery where clicking on an image will display a pop-up showing the image along with its relevant tags, title, and photo ID

Page´s photo Hello there, I am currently working on creating a Flickr API using JavaScript and HTML. My goal is to search for photos and display them in an HTML page, but I'm struggling with implementing a pop-up feature that includes the photo' ...

javascripthtmlflickr

Utilize jQuery to dynamically swap out a CSS stylesheet in response to changes in the body class

In the head section of my HTML, I have the following stylesheet: <link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css"> I want to replace this stylesheet with different ones based on changes in the body# ...

jquerycssreplacestylesheet

Tips for avoiding word fragmentation in <pre> code blocks

pre { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ overflo ...

htmlcss

Continuously flipping text in response to the object in front of it

I'm struggling with coding a fixed navbar at the bottom of my page. The navbar consists of plain text without a background color and I want the text to invert color to remain visible over different backgrounds. I've tried using mix-blend-mode in ...

htmlcss

Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...

javascripthtmlcssattributesstylebot

Organize your list with a single click using jQuery plunge

I am trying to organize a group of list items based on a specific date. Below is the code I have written for this task: Please review the code snippet provided below. $(document).on('change','#exampleSelect',function(){ var filt ...

jqueryhtml

The comparison between CSS single ID selectors and ID selectors followed by additional elements

Recently, I came across this code snippet in a CSS file: #nav { margin: 13px 0 0 0; } #nav ul li { margin: 0 20px 0 0; } Is it possible that the second #nav property declaration overrides the first one? (By the way, am I using the correct term by sayin ...

css

Determine the outcome with a PHP conditional statement for either "

I'm currently working on adding a function to a script where the user is prompted for a code, which I have successfully added. However, I am facing an issue in determining when to ask the user for the code and when not to. So, I believe I need to use ...

phphtmlif-statement

Generate random images and text using a script that pulls content from an array

My goal is to have my website refresh with a random piece of text and image from an array when a button is clicked. I have successfully implemented the text generation part, but I am unsure how to incorporate images. Here is the current script for the text ...

javascripthtml

Combine words into lowercase in JavaScript variable

I'm struggling to understand why the data from a form field input is not being stored correctly in a SharePoint column data collection. Currently, when someone inputs a name into a form field, it should automatically populate a SharePoint list: http ...

javascriptjqueryhtmltwitter-bootstrapjavascript-objects

What strategies work well for guiding individuals to different destinations based on their user roles, such as administrators and regular users?

In my CMS environment, I am facing a challenge with redirecting users who are not administrators or do not own the document they're trying to edit. The following code snippet is what I have implemented, but it seems that my administrators cannot acces ...

phphtmlmysqlhttp-redirect

Using CSS zoom to enhance JQuery/Javascript Smart Guides

Lately, I've been exploring the idea of incorporating 'smart guides' into one of my JQuery Draggable projects. This project involves a variable zoom level, and I've made adjustments in my code to accommodate it. However, I'm encoun ...

jqueryhtmlcssjquery-ui

Issue with rgba background color not working in Bootstrap 3 navbar

Attempting to change the background color of bootstrap's navigation bar to a lower opacity rgba one, but facing difficulties. There are no changes being reflected at all. Below is the custom navbar CSS: .navbar-custom { background-color: rgba(255 ...

htmlcsstwitter-bootstrap

The ModelMultipleChoiceField outputs the "name Object" result

Encountering a challenge while using ModelMultipleChoiceField. The models in question are Instrumentation and InstTemplate: class Instrumentation(models.Model): code = models.CharField(max_length=70, unique=True) marca = models.CharFi ...

htmldjango