Hover over a link to split it into two separate links

I'm attempting to create a link that transforms into two separate links when the text is hovered over. An example of what I am trying to achieve can be seen here: . This website showcases how the 'collections' link splits into two distinct links for men and women upon hovering over it. So far, I have successfully created a link that separates into two words when hovered over, but not into two different links.

Below is my HTML code:

<li><a href="#" id="nav-item1"><span>Collection</span></a></li>

And here is my CSS code:

#nav-item1:hover span {
    display:none;
}

#nav-item1:hover:before {
    content: "Men Women";
}

While the text transformation works as intended, I am still unsure of how to convert the text into two separate links. I am uncertain if JavaScript is necessary for this task, as my proficiency in JS is limited.

Any suggestions?

javascriptjqueryhtmlcsshover

Answer №1

To clarify, you could experiment with the following approach:

li {
  list-style: none;
}

li a {
  display: none;
  margin-left: .3em;
}

li:hover span {
  display: none;
}

li:hover a {
  display: inline-block;
}
<li>
  <span>Playlist</span>
  <a href="#" id="nav-item1">Rock</a>
  <a href="#" id="nav-item2">Pop</a>
</li>

Answer №2

Here's a quick guide on how to make this happen.
At the top, there is a block element.

Within the block element, there are two hidden child elements.

When you hover over the block element, the hidden elements become visible.

You can also hide the child element with text when hovering over it.

.block:hover .hide {
  display: inline;
}

.block {
  color: black;
  font-size: 20px;
}

.hide {
  display: none;
}
<div class="block">
  <span class="default text">Hover</span>
  <a class="hide" href="#">Snowball</a>
  <a class="hide" href="#">Kitten</a>
<div>

Answer №3

.hidden-links {
display: none;
}

.categories:hover .single-category {
display: none;
}

.categories:hover .hidden-links {
display: inline;
}
<div class="categories">
  <a href="#" class="single-category">Fashion</a>
  <a href="#" class="hidden-links">Men's Fashion</a>
  <a href="#" class="hidden-links">Women's Fashion</a>
</div>

Answer №4

Give this a try

#nav-item1{
  position: relative;
}

#nav-item1:before,
#nav-item1:after{
  display: none;
  position: absolute;
  top: 100%;
  color: #000;
}

#nav-item1:hover:before,
#nav-item1:hover:after{
  display: block;
}

#nav-item1:before{
  content: 'Men';
  right: 50%;
}

#nav-item1:after{
  content: 'Women';
  left: 50%;
  color: green;
}
<ul>
  <li><a href="#" id="nav-item1"><span>Collection</span></a>
  </li>
</ul>

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

Defining the NgRx root state key within the application state interface

Here is an example of a selector taken from the NgRx documentation: import { createSelector } from '@ngrx/store'; export interface FeatureState { counter: number; } export interface AppState { feature: FeatureState; } export const sel ...

javascriptangulartypescriptreduxngrx

The Html.BeginForm() function is directing to an incorrect action within my controller

I'm facing an issue with my HTML form that is built using Html.BeginForm(). Even though I specify the controller name and action name, it always redirects to the wrong action. Here is a snippet from my view: @using (Html. BeginForm("AdminPanelResult" ...

c#htmlasp.net-mvcumbraco

Parsing CSV files using AngularJS

I am currently developing a CSV file parser using node and Angular. When a user uploads a CSV file, it is processed on the server side with node and the csv-parse library. This results in an array of objects based on the input CSV file. On the Angular si ...

htmlangularjsnode.jsdata-manipulation

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

javascriptreactjsangulartypescriptreact-native

Refine your search by name following the implementation of a character-altering filter

Encountered a scenario in which there is a need to filter elements generated by the 'ng-repeat' directive. I have implemented a custom filter that replaces one character with another and vice versa for each element created. However, when attempt ...

javascripthtmlangularjs

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

Currently, I am utilizing electron to construct an application with two windows. In my attempt to open a second window from the renderer process, I have implemented the following code snippet: const electron = require('electron'); const BrowserW ...

javascriptelectron

Efficient PHP file upload using Ajax

Where should I place my PHP SQL query to insert image information into my database? I attempted to put it just before the echo "success", but it did not work. <!-- Upload Button--> <div id="upload" >Upload File</div><span id="status" ...

phpjavascriptajaximageupload

Issues with CSS media queries not being responsive in Safari

Can anyone shed light on why media queries are not functioning properly in Safari? Here is an example: body { background-color:black; } @media screen and (min-width: 1024px) and (max-width: 1300px) { body { background-color:red; } } ...

css

Transform Default Buttons to Resemble Normal Buttons

I currently have a JavaFX button that is set as the Default Button, allowing users to select it with the Enter key. The button has a blue background: https://i.sstatic.net/SYvIj.png However, I would like to change its appearance to that of a normal butto ...

cssbuttonjavafxjavafx-8

Deactivate the focus state when hovering over different items in the navigation bar

Currently facing an issue with my Navbar items having underline animation on hover. Once clicked, the animation persists. However, when hovering over a neighboring navbar item, the underlines appear next to each other, creating the illusion of one long lin ...

javascriptjquerycssnavbar

Navigating Through Secondary Navigation with Ease

In my React project, I am developing a mega-menu styled dropdown navigation. As a functional component, I am utilizing the useState hook to manage the state and control the display of sub-navigation items. The functionality of the dropdown is operational, ...

javascriptcssreactjs

What is causing the links at the bottom of the page to not function properly?

<div class="col-lg-4 col-sm-12 footer-social"> <a href="https://www.facebook.com/unique.page123"><i class="fa fa-facebook"></i></a> <a href="https://twitter.com/UniquePage456"><i class="fa fa-twitter"></ ...

htmlweb

Return to a mention of a tree reference

Here is an example code snippet: <table> <tr> <td></td> <td></td> <td> <table> <tr> <td><a href="#" class="fav">click me</a></td> ...

javascriptjquery

Exploring the Concept of Sending Data via AJAX Request

Trying to comprehend the intricacies of the HTTP POST request transmitted through jQuery's .ajax() or .post() functions. I'm puzzled by the presence of a 'datatype' parameter for server-sent data. What exactly will be included in the r ...

javascriptjqueryajax

Testing the capabilities of AngularJS with e2e testing using the angular-recaptcha library

I have been attempting to e2e test my basic application, but I am facing challenges with the angular-recaptcha plugin from VividCortex (https://github.com/VividCortex/angular-recaptcha). Here is the test case I am working on: it('should redirect t ...

javascriptangularjsseleniumprotractor

Anticipated semicolon in the JavaScript file

I recently came across the dialogflow demo as a reference. However, I encountered an error stating 'semicolon expected' at the method sendTextMessageToDialogFlow. How can I resolve this issue? Below is the code snippet: router.post('/dialo ...

javascriptnode.jsexpress

Creating a function in React to be passed as a prop

Recently, I was given the task of enhancing a user interface as a small challenge to help me dive into the world of programming. My goal is to incorporate a date picker into my search bar to allow users to filter their search results by selecting specific ...

javascriptreactjsdatepickermaterial-uijsx

What are the advantages of using React JS for a Single Page Application compared to server-side rendering?

Currently, I am faced with a conundrum when it comes to selecting the best approach for a highly scalable project. On one hand, server-side rendering using Node.js with Express (utilizing EJS) to render full HTML pages is an option. On the other hand, ther ...

javascriptnode.jsreactjsexpressreact-router

JQuery fails to properly decode JSON arrays generated in PHP/MySQL

Trying to execute an AJAX call to a PHP script that should return an array for encoding and decoding using JQuery. Here's what is being attempted: The PHP page called by AJAX: $web_q=mysql_query("select * from sec_u_g where uid='$id' "); $ ...

phpjquerymysqlajax

Creating a split background with dual hues in a VUE project

I'm new to learning VUE and I'm trying to create a page where two different colors connect on the left and right with the same height. However, I'm running into issues where the colors don't align unless I add content to the right side. ...

cssvue.jsvuejs2