``motioning a component beneath another component that may be in a state

Having an issue with my CSS. I have some elements generated by JavaScript and when hovering over them, another element is displayed below the others for some reason.

Here's the CSS related to this problem:

.hiddenTextjob
    {
        display:none;
        background-color:#000;
        color:#FFF;
        width:170px;
        z-index:2!important;
        height:55px;
    }

    .ghost_for:hover > .hiddenTextjob
    {
        display: block;
        background-color:#000;
        color:#FFF;
        width:170px;
        margin-top:-55px;
        z-index:1!important;
    }
    .ghost_for
    {
        border: 0;
        position:absolute;
        background-color:blue;
        z-index:1!important;
    }

The .hiddenTextjob is supposed to be above the ghost_for element but it's currently displaying below...

[EDIT] Here's a JSFiddle link to demonstrate: https://jsfiddle.net/95jtx2oL/

When hovering over a blue element, sometimes the black hover appears above, and sometimes it appears below causing frustration...

javascripthtmljquerycss

Answer №1

.ghost:hover {
    z-index: 2!important;
}

Simply add the CSS rule above to resolve the problem ^^ jdfiddle

The issue stemmed from HTML element stacking. Elements with lower z-index values are positioned higher in the stack. By increasing the z-index of the hovered element, its child elements will be displayed on top.

Answer №2

It's a bit odd that the z-index is set to 1 in this scenario.

.ghost_for:hover > .hiddenTextjob
{
    display: block;
    background-color:#000;
    color:#FFF;
    width:170px;
    margin-top:-55px;
    z-index:1!important;
}

The default value of 2 seems more appropriate. Consider removing the z-index from the code above or changing it to 2.

Answer №3

If you're not certain about your HTML code, consider giving this a try:

.hiddenTextjob {
  display: none;
  background-color: #000;
  color: #fff;
  width: 170px;
  z-index: 2 !important;
  height: 55px;
}

.ghost_for:hover > .hiddenTextjob {
  display: block;
  background-color: #000;
  color: #fff;
  width: 170px;
  margin-top: -55px;
}
.ghost_for {
  border: 0;
  position: absolute;
  background-color: blue;
  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

disable event listeners on the DOM

I am currently developing a web framework and focusing on integrating XSS prevention measures. I have successfully implemented data escaping for database storage, but now I am faced with the challenge of allowing users to save generated HTML without riskin ...

javascriptjquerydomxssunbind

What could be the reason my Backbone view is failing to render?

Can anyone help me troubleshoot why this template isn't rendering properly in my backbone views? Any insights would be greatly appreciated! Below, I've included the code from my jade file for the views and the main.js file for the backbone js scr ...

javascriptnode.jsbackbone.jspug

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

I am aware of the potential for a Cross-Site Forgery Attack that can target requests returning arrays by manipulating the Array constructor. For instance, let's say I have a site with a URL: foo.com/getJson that provides the following array: [&apos ...

javascriptjsonxsssecurityxmlhttprequest

PHP unable to capture POST data sent through AJAX utilizing FormData method

Trying to send basic data through JavaScript and PHP, but the PHP side is not picking up any data. The JavaScript code I'm using is as follows: var formData = new FormData(); formData.append("action", "save-game"); formData.append("title", title); ...

phpjqueryajaxpostform-data

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Bug in toFixed causing incorrect results

function calculateTaxAndTotalRent(rent) { var phoneCharges = parseFloat($('#phone_charges').val()); phoneCharges = phoneCharges.toFixed(2); rent = parseFloat(rent); rent = rent.toFixed(2); var tax = parseFloat((rent * 15) / 1 ...

javascriptjquery

Extracting a nested property from a JSON object without relying on the lodash get method

We have a sample json data: { "name": "app", "version": "0.1.0", "description": "Sample description", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "so ...

javascriptjsonnode.js

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

I am facing an issue with JQuery and JQuery UI. I thought upgrading to the latest stable version would solve it, but unfortunately, that was not the case. I am currently using Chrome. When I initiate the dialog by clicking on a specific element, everythin ...

javascriptjqueryhtmljquery-ui

The functionality of linear mode seems to be malfunctioning when using separate components in the mat-horizontal-stepper

In an effort to break down the components of each step in mat-horizontal-stepper, I have included the following HTML code. <mat-horizontal-stepper [linear]="true" #stepper> <mat-step [stepControl]="selectAdvType"> <ng-template matStep ...

javascriptangulartypescriptangular-materialangular5

Refresh the page using a jQuery AJAX call

In my current project using asp.net mvc, I encountered an issue while passing a string to the controller post method to retrieve records and display them on the view. The problem is that although my viewmodel receives the correct records through an ajax ...

jqueryajaxasp.net-mvcreloading

Guide to making two text boxes with SimpleDialog in jQuery Mobile

I came across the link below, but unfortunately it's not working for me. jQuery Mobile SimpleDialog with two Inputs? Is there anyone who can assist me after reviewing the code snippet provided below? <script type="text/javascript> ...

javascriptjqueryjquery-mobile

Utilizing the power of SimpleHTMLDom to retrieve high-resolution images through an advanced Google search

I want to display a large image that was retrieved from Google using simple_html_dom.php include_once( "simple_html_dom.php" ); $key="unique"; $html = new simple_html_dom(); $html=file_get_html('http://images.google.com/images?as ...

phphtmldom

Viewing a document generated using the Google Drive API using the Google Drive Viewer

Using the Google Drive API, I am able to generate a document and receive some URLs: alternateLink : https://docs.google.com/document/d/xxxsome_idxxxxx/edit?usp=drivesdk embedLink https://docs.goo ...

javascripthtmlgoogle-drive-api

How can I implement a feature to automatically close a drawer in a React application using the Material UI

Currently, I am utilizing a React material design theme However, I am facing an issue where the drawer navigation button on mobile view does not close automatically upon clicking I need something like (onClick={handleClose}) to resolve this problem Does ...

javascriptreactjsreact-native

Using Regular Expressions in an ExpressJS Router

When working with ExpressJS, is there a way to combine the following routes into one using RegEx? app.get(/^\/blog(?:\/p(\/\d+)?)?$/, blog.list); ...

javascriptregexnode.jsexpress

To show the image along with the .titleclass, .subtitleclass, and .description when clicking on it, what steps do I

<?php while($galleryrec = mysqli_fetch_array($getresultgallery)){ ?> <div class="col-lg-2 col-md-2 mb-4 mb-lg-0" id="imageidback"> <img data-id ="<?php echo $galleryrec['publishid& ...

javascriptphpjqueryajaxbootstrap-4

Store the link in a variable and retrieve its content into another variable

Is there a way to extract the content of a link stored in a variable and store it in another variable using jQuery or javascript while working on an XML page? I know this is possible with php, but since I am developing a Chrome extension, I am wondering ...

javascriptjquerygoogle-chrome-extension

Frostyfire Ajax - Form Sending

I am seeking assistance with ColdFusion. I am interested in utilizing the CF9 ajax library. Currently, I have included <cfajaximport tags="cfform"> in my header and added a form using <cfdiv bind="url:domainchecker.cfm">. However, the entire fo ...

jqueryajaxcoldfusioncfform