Span element hides the text in the background

Is there a more efficient way to accomplish this task? My current approach involves creating a slide-in background color effect when hovering over a link. However, I am encountering some difficulties with the CSS implementation. In my setup, each link contains a span element (used to represent the background color) followed by text like this:

<a href="/info/about"><span></span>About</a>

The issue I'm facing is that the text appears behind the span element when rendered. I've attempted adjusting the order of elements without success. How can I resolve this issue?

I have applied z-index values to each element, but the problem persists.

You can view the code on JSFiddle here: http://jsfiddle.net/h5rnj/

css

Answer №1

To implement the change, set .nav-links a span to have a z-index: -1. Additionally, check out the animation in CSS3 here: http://jsfiddle.net/h5rnj/10/

CSS:

.nav-links a span{
    display: block;
    background-color: #808080;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: all 1s ease-in; 
}
.nav-links a:hover span{
    left: 0;
    transition: all 1s ease-in; 
}

Answer №2

If you adjust the z-index of .nav-links a span from 1 to -1, it will work smoothly.

.nav-links a span{
    z-index: -1;
}

Check out jsFiddle for reference.

This adjustment is effective because the z-index property creates stacking contexts, making each usage of z-index establish an independent stacking context. The original z-index was 1, causing it to override the link text's default value. By setting a negative z-index, the span is positioned behind the link text within the same element as intended.

It's important to note that the behavior of z-index isn't always straightforward, as it establishes its own hierarchy within each stacking context. For instance, in this example, a red div.sub-one appears above its parent and another nested div despite having a z-index of -1000.

Answer №3

Adjust the z-index property for the span

like so: 

.nav-links a span {
z-index: -1
}

View Example on JSFiddle

For more information, read Why does z-index: -1; appear above z-index: 1;?

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

Getting rid of the arrow icons in a Material UI TextField

I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...

cssreactjsmaterial-uiiconstextfield

Repairing the Performance of the 'Save' Feature

Can the 'Save' button in my code save team assignments for players selected using drag and drop? I'm considering using localStorage, but unsure about implementation. Note: To run the code properly, copy it as an HTML file on your computer. ...

javascriptjqueryhtmlcss

I created a news platform using Next.js server-side rendering, but I'm having trouble with the export const metadata = { title: "TEST" } not functioning as intended

After building my News Website using Next.js with Server Side Rendering, I encountered an issue with setting the page title. Despite using export const metadata = { title: "TEST" }, the title remained unchanged. The metadata object appears to be ...

javascripthtmlcssreactjsnext.js

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

cssreactjsmaterial-ui

Set the height of the main div container to a fixed size

I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height. Here is the code snippet: http://jsfiddle.net ...

css

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Positioning two divs to the right of another div

I am facing an issue with aligning the menu and categories divs to the right of the logo div in the following example: jsfiddle. I want them to remain stacked one under another as they are currently, but I am unable to achieve the desired display. Any ass ...

css

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

Ensure that the dropdown <select> remains open even while filtering through options

I am currently working on implementing a mobile-friendly "filtered dropdown" design: https://i.sstatic.net/SYjQO.png Usually, a <select> control remains closed until the user clicks to open it. Is there a straightforward way to keep it always open ...

cssvue.jsdrop-down-menumobile-website

Eliminate the bottom padding on the body in your HTML and CSS code

My Unique Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <style> /*RESET BLOCK START ------------------------------------------------------------------------------------------------------------------*/ ...

htmlcssflexbox

Using @at-root seems to be causing an error when combining the "a" selector with

I encountered an issue when attempting to use @at-root and Interpolation in my Sass code. Despite using a standard example for testing, I still receive an error: .button { @at-root a#{&} { color: green; } } Error sass/Site.scss (Line 28 of s ...

cssrubywindowssasscompass

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

javascripthtmlcssgoogle-webfonts

Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

One issue I encountered on my website involves a meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This, combined with height:100%; on the html and body tags, causes problems when viewed on Safari ...

htmlcssiossafari

The logo in the Bootstrap 4 beta navbar-brand does not dynamically resize when the navbar collapses, even with the img

Bootstrap 4 Beta Usage Incorporating a logo and inline menu links in the responsive navbar of my website has been a challenge. While the navbar collapses appropriately with viewport changes, the logo fails to shrink proportionately. This results in the ha ...

csstwitter-bootstrapbootstrap-4

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

Is it possible to apply border-radius to selections, similar to how it is done in vscode

It was reminiscent of this... Visual Studio Code ::selection{ border-radius: 5px; } I attempted something similar to this, however it was not successful... ...

css

CSS Trick: Applying first-of-type selector to specific instances of a div

I'm currently grappling with how to specify that a 'first-of-type' should only be present on specific instances of a div. For instance, suppose I have a class called ".maintext" and in some cases I want the first paragraph to feature a dropc ...

csscss-selectors

Make the header background color shift as the page is scrolled down on the fixed header

I am currently using a sticky transparent header on my website www.obviagency.com Here is the CSS code: #site-header-inner { height:0px; z-index:170; margin:0 auto; width:100%; position:fixed; top:0; margin-top:10px; } I would like to change the backgr ...

csscolorsheadertransparentsticky

What is the recommended approach for linking CSS files when utilizing ASP.NET URL routing?

Within my URL routing setup, I have a master page content template that references a stylesheet on the destination page: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <link href="css/actionmenu.css" rel="stylesheet" t ...

asp.netcssurl-routing

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks