What is the best way to show a list when hovering the mouse over a

<nav>
<a href="login.html" class="dropdown-content" style="text-align: center"><span id="login">您好</span><i class="login"></i></a>
<a href="9.html"><i class="like"></i></a>
<a href="7.html"><i class="file"></i></a>
<a href="4.html" style="text-align: center"><span id="counter">0</span><i class="drink"></i></a>
</nav>

Is it possible to create a dropdown list on login when hovering with the mouse?

#login{
    color: #cb3e31;
    font-size: 18px;
    top: 31px;
    margin-top: 30px;
    margin-left: 15px;
    width: auto;
    text-align: center;
}

https://i.sstatic.net/fPfGO.jpg

jqueryhtmlcss

Answer №1

To start, enclose your list within a div element for easier management or display each item individually

<nav>
    <a href="login.html" class="dropdown-content" style="text-align: center">
       <span id="login">Hello there</span><i class="login"></i>
    </a>
    <div id="list">
        <a href="9.html"><i class="like"></i></a>
        <a href="7.html"><i class="file"></i></a>
        <a href="4.html" style="text-align: center"><span id="counter">0</span><i class="drink"></i></a>
    </div>
</nav>

<script>
    $("#login").hover(
      function() {
        // show the element
        $('#list').show();
      }, function() {
        // hide the element
        $('#list').hide();
      }
    );
</script>

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

JavaScript Magic: Hide Div when Clicking Away

I need a solution where clicking outside of the My DIV with the ID Container_ID will hide all elements within the Container by setting their style to display: none;. Currently, the JavaScript code I am using partially achieves this functionality, but it al ...

javascriptcss

Looking for assistance in creating a stunning portfolio showcase?

As I work on building my portfolio webpage, I've realized that with my limited knowledge of HTML/CSS, creating a great gallery might be challenging. In search of an efficient solution, I ventured across the web but couldn't find anything that ful ...

htmlcss

Encountered a glitch during the npm installation process for mui core

I recently set up a new create-react-app and am still encountering the same error message. After installing MUI, I'm getting an 'unable to resolve dependency tree' issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve depende ...

htmlreactjsmaterial-ui

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

javascripthtmlcssgraphgoogle-visualization

Using jQuery .post to fetch PHP include not working

My website is constructed using PHP include files that act as templates. Any changes made to one file affect the entire website. When I select a radio button, AJAX should trigger and attempt to communicate with another PHP file responsible for connecting ...

phpjquerymysqlajaxinclude

Using Javascript to retrieve a variable and dynamically updating the source of an HTML iframe

I have two JavaScript variables, 'long' and 'lat', in the code below. My challenge is to append these values to the end of the iframe URL. I would appreciate assistance on modifying the code below to achieve this. The iframe code bel ...

javascriptjqueryhtmliframe

Is it possible to change the activation of a link from a double click to just a single click in Angular 5?

I am currently working on an Angular 5 app and have created a navigation component that displays different tabs/links. When a link is active (being viewed), the tab is highlighted with a border to resemble the front of a file folder. However, I am facing ...

htmlangular

Executing SQL Query on Button Click Event

I am working with PHP and trying to execute a SQL query when a button is pressed. However, the issue I'm facing is that nothing happens when I click the button! I checked the developer console but there doesn't seem to be any action detected when ...

phpjqueryhtmlajax

Have you attempted to configure a JSON file to facilitate language translations?

I need some guidance on structuring my data.json file efficiently. Currently, it is set up as shown in the example below. The goal is to have a drop-down menu where users can select a language and then display 50 different pages with specific content. I wa ...

javascriptjqueryjsondrop-down-menutranslation

Selection of multiple listings

Looking for a solution to create a multi list selection area? You can double click on an item in the left list to add it to the selected area. Also, you can double click on an item in the selected area to remove it from the list. <ul id="selection"> ...

jqueryhtml

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

javascriptjqueryhtmliframe

Loading a div using Ajax within a frame

My php page includes a div that is supposed to be populated by an Ajax call. function showcopay() { var apa = document.getElementById("alert_id").value; $("#copay").load('show_copay.php?pid='+apa); } The parent page of the div used to be ...

javascriptjqueryhtmlajax

Is there a way to eliminate this from the footer section?

Check out my website: If the text is not visible, try using a larger monitor or zooming out in your browser. I've added an image to help explain: I only want to remove that element + title on the first page This is the HTML code: <div id="to ...

htmlcss

Utilizing gradient effects on table backgrounds with html/css

Trying to enhance my responsive table by adding a gradient background, but encountering an issue where the style being applied is repeating in every cell, creating a messy look. Here's the gradient I'm using: background: linear-gradient(to right ...

htmlcsshtml-tablegradient

Tri-party class switch-up

I successfully implemented two radio buttons to toggle between alternative texts: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

javascriptjqueryhtmlcss

The jQuery UI Tabs Ajax feature seems to only be displaying content in the first tab that is

My jQuery UI tabs are set up to load their content using the ajax method: <div id="tabs"> <ul> <li><a href="/messages/inbox" title="Inbox"><span>Inbox</span></a></li> <li><a href ...

jquery-uijqueryjquery-ui-tabs

Java Applet for capturing specific sections of a webpage to create a screenshot

Does anyone know of a way (applet or something else) to capture a screenshot of the content within a specific div on a webpage? I came across this Java code for capturing a screenshot of the entire screen: import java.awt.AWTException; import java.awt.Re ...

javajqueryhtmlwebapplet

The functionality of CSS isn't up to snuff on Mozilla Firefox

I am having an issue with CSS styling on a <div> element in my PHP page. The CSS style is working perfectly in Google Chrome, but when I test my code in Firefox, the styling is not being applied. .due-money { background-color: #09C; color: whi ...

phphtmlcssfirefoxcross-browser

Iterate over various selection lists and tally the frequency of each option being chosen

I am currently working on a website that requires multiple instances of the same select-option to be created. I want to keep track of how many times each option is selected, and save that count as a variable to be used in a PHP email function. For instanc ...

javascriptphpjquery

Does jQuery have a concept of a "true height"?

Could this be considered a silly question? I'm curious to find out if there's a "power" function that can give me the actual height of a div, taking into account the height of elements with "display:none;" as well. Is this just wishful thinking? ...

jquery