The hover functionality fails to activate when a z-index is applied

Question

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unfortunately, the hover state ceased to function unless I scrolled an equivalent amount as the height of the container div – typically around 3 scrolls before the hover state reactivated.

HTML

<div id="div-1">
 <div class="container"></div>
</div>

<!-- additional div elements -->

<div id="div-2">
 <a href="#">This is a link</a>
</div>

CSS

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;}
#div-1{
...CSS properties...
}

An important note: The container remains hidden via JQuery unless a specific button is clicked.

JQuery code...

https://example.com/image.jpg

After trying various approaches, such as adjusting the z-index values for both the container and link, the issue persists.

Update: I am considering changing the CSS property "z-index", specifically when the container button is toggled on.

Therefore, the link will feature z-index:-9; only when the container is visible. When the container is toggled off, the z-index should either be removed or remain at default.

I'm struggling with implementing this concept using jQuery, and my current attempt still results in the z-index remaining active when the container is toggled off. How can I properly remove or reset the z-index value?

Any alternative solutions to this problem are welcomed.

javascript jquery html css

Answer 1

Answer №1

It seems like you are a bit unsure about your requirements, but the images provided did help to some extent. It appears that you want the link above the container, although there seems to be some confusion about it?

The main objective here is to have the anchor at a lower index, so that when the container is toggled on or viewed, the link doesn't overlap on top of the container.

However, you still want the link to respond when hovered upon. It seems like you are puzzled as to why the hover effect isn't working when the container is open and the link is visible. Logically, one would expect to be able to hover over the visible part of the link at least.

It's not related to jQuery or the .container, rather it's about the parent container of the .container which is referred to as #div-1. Due to its inherent block behavior, the #div-1 width remains 100%, even without any explicit styling.
- Solution: Assign a smaller width to #div-1.
You have a fixed position for the link but no coordinates specified. A fixed element requires defined positioning in order to function properly. Also, if there are other positioned elements with which you expect interaction, those elements should be positioned too. By setting position:relative for div-1, the z-index properties of the link and div-1 will function correctly.
- Solution: Provide #div-2 with top and left or right along with bottom properties. Ensure #div-1 has a position property for proper functioning of z-index.

All specific details are documented within the source code.

PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    #div-1 {
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      border: 1px solid red;
      width: 200px;
      /*Enable this and it will block link*/
      /*width:100%;*/
      height: 290px;
    }
    .container {
      /* This saves you an unnecessary step in jQuery */
      display: none;
      width: 200px;
      height: 290px;
      background: orange;
    }
    #div-2 a {
      width: 13%;
      height: auto;
      padding: 0.5em 2.3em;
      display: block;
      position: fixed;
      font-weight: 500;
      font-size: 1.09em;
      text-align: center;
      background-color: none;
      text-decoration: none;
      outline: none;
      /* It's not clear whether you want the link above or
      | below the container. If above, simply change to
      | z-index: 2
      */
      z-index: 0;
      /* If you have a fixed element give it coords, otherwise       
      | it doesn't know where it should stand and behavior
      | will be unexpected.
      */
      top: 10%;
      left: 125px;
    }
    #div-2 a:hover {
      background: red;
      color: white;
    }
    /* FLAG is just to test the accessibility of the link */
    #FLAG {
      display: none;
    }
    #FLAG:target {
      display: block;
      font-size: 48px;
      color: red;
    }
  </style>
</head>

<body>
  <button id='button-f'>F</button>
  <div id="div-1">
    <div class="container">Container is open</div>
  </div>

  <!-- other divs like 5 or 6 of 'em -->

  <div id="div-2">
    <a href="#FLAG">This is a link</a>
    <span id='FLAG'>This link is accessible now!</span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    /* This is the jQuery you need to accomplish what you want.
    | The rest was redundant and unnecessary.
    */
    $(document).ready(function() {

      $("#button-f").click(function(e) {
        $(".container").toggle();

      });

    });
  </script>
</body>

</html>

Answer 2

It seems like you are a bit unsure about your requirements, but the images provided did help to some extent. It appears that you want the link above the container, although there seems to be some confusion about it?

The main objective here is to have the anchor at a lower index, so that when the container is toggled on or viewed, the link doesn't overlap on top of the container.

However, you still want the link to respond when hovered upon. It seems like you are puzzled as to why the hover effect isn't working when the container is open and the link is visible. Logically, one would expect to be able to hover over the visible part of the link at least.

It's not related to jQuery or the .container, rather it's about the parent container of the .container which is referred to as #div-1. Due to its inherent block behavior, the #div-1 width remains 100%, even without any explicit styling.
- Solution: Assign a smaller width to #div-1.
You have a fixed position for the link but no coordinates specified. A fixed element requires defined positioning in order to function properly. Also, if there are other positioned elements with which you expect interaction, those elements should be positioned too. By setting position:relative for div-1, the z-index properties of the link and div-1 will function correctly.
- Solution: Provide #div-2 with top and left or right along with bottom properties. Ensure #div-1 has a position property for proper functioning of z-index.

All specific details are documented within the source code.

PLUNKER

SNIPPET

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    #div-1 {
      overflow-y: auto;
      overflow-x: hidden;
      box-sizing: border-box;
      position: relative;
      z-index: 1;
      border: 1px solid red;
      width: 200px;
      /*Enable this and it will block link*/
      /*width:100%;*/
      height: 290px;
    }
    .container {
      /* This saves you an unnecessary step in jQuery */
      display: none;
      width: 200px;
      height: 290px;
      background: orange;
    }
    #div-2 a {
      width: 13%;
      height: auto;
      padding: 0.5em 2.3em;
      display: block;
      position: fixed;
      font-weight: 500;
      font-size: 1.09em;
      text-align: center;
      background-color: none;
      text-decoration: none;
      outline: none;
      /* It's not clear whether you want the link above or
      | below the container. If above, simply change to
      | z-index: 2
      */
      z-index: 0;
      /* If you have a fixed element give it coords, otherwise       
      | it doesn't know where it should stand and behavior
      | will be unexpected.
      */
      top: 10%;
      left: 125px;
    }
    #div-2 a:hover {
      background: red;
      color: white;
    }
    /* FLAG is just to test the accessibility of the link */
    #FLAG {
      display: none;
    }
    #FLAG:target {
      display: block;
      font-size: 48px;
      color: red;
    }
  </style>
</head>

<body>
  <button id='button-f'>F</button>
  <div id="div-1">
    <div class="container">Container is open</div>
  </div>

  <!-- other divs like 5 or 6 of 'em -->

  <div id="div-2">
    <a href="#FLAG">This is a link</a>
    <span id='FLAG'>This link is accessible now!</span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    /* This is the jQuery you need to accomplish what you want.
    | The rest was redundant and unnecessary.
    */
    $(document).ready(function() {

      $("#button-f").click(function(e) {
        $(".container").toggle();

      });

    });
  </script>
</body>

</html>

Answer 3

Answer №2

Have you attempted adding a z-index to #div-2?

To properly assign a z-index, make sure to also give it a position. Here is an example:

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}

#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1; 
 }

Answer 4

Have you attempted adding a z-index to #div-2?

To properly assign a z-index, make sure to also give it a position. Here is an example:

#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}

#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1; 
 }

Answer 5

Answer №3

It's unclear what exactly is happening in your code, but upon reviewing the provided JavaScript, there seems to be an issue with the if section referring to 'button-f'. Do we really need this line? It also appears unnecessary to hide the 'container' in JS. Currently, you have to scroll to a certain height set by #div-1, which is not hidden. The amount of height you need to scroll is determined by that. Here are the changes I made to your code: 1. Moved the height attribute from div-1 to the .container class. 2. Included the missing a:hover class and removed some unnecessary CSS. If you have any other questions, feel free to ask in the comments LIVE ON FIDDLE

$(document).ready(function() {

 $("#button-f").click(function() {
     $(".container").toggle();
   });
  });

   button {
  width: 13%;
  height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
 }
.container {
   height:290px;
  display:none;
  border: 1px solid red;
   
}

#div-2 a {
  width: 13%;
  height: auto;
  padding: 0.5em 2.3em;
  display: block;
  positon:fixed;
  float:right;
  font-weight: 500;
  font-size: 1.09em;
  text-align: center;

  text-decoration: none;
  border-radius: 10px;
 

}

#div-2 a:hover {
  background: black;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<body>
 <button id="button-f">
    button
 </button>
 <div id="div-1">
   <div class="container">tagasdgasdgasdgas</div>
 </div>

 <!-- other divs like 5 or 6 of 'em -->

 <div id="div-2">
   <a href='#'>This is a link</a>
 </div>
</body>

Answer 6

It's unclear what exactly is happening in your code, but upon reviewing the provided JavaScript, there seems to be an issue with the if section referring to 'button-f'. Do we really need this line? It also appears unnecessary to hide the 'container' in JS. Currently, you have to scroll to a certain height set by #div-1, which is not hidden. The amount of height you need to scroll is determined by that. Here are the changes I made to your code: 1. Moved the height attribute from div-1 to the .container class. 2. Included the missing a:hover class and removed some unnecessary CSS. If you have any other questions, feel free to ask in the comments LIVE ON FIDDLE

$(document).ready(function() {

 $("#button-f").click(function() {
     $(".container").toggle();
   });
  });

   button {
  width: 13%;
  height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
 }
.container {
   height:290px;
  display:none;
  border: 1px solid red;
   
}

#div-2 a {
  width: 13%;
  height: auto;
  padding: 0.5em 2.3em;
  display: block;
  positon:fixed;
  float:right;
  font-weight: 500;
  font-size: 1.09em;
  text-align: center;

  text-decoration: none;
  border-radius: 10px;
 

}

#div-2 a:hover {
  background: black;
  color: white;
}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<body>
 <button id="button-f">
    button
 </button>
 <div id="div-1">
   <div class="container">tagasdgasdgasdgas</div>
 </div>

 <!-- other divs like 5 or 6 of 'em -->

 <div id="div-2">
   <a href='#'>This is a link</a>
 </div>
</body>

The hover functionality fails to activate when a z-index is applied

Answer №1

SNIPPET

Answer №2

Answer №3

Similar questions

Sort through an array of objects using a different array

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Struggling to retrieve the header in Angular 6

Develop a real-time preview of the form inputs

React - passing down a ref as a prop isn't functioning as expected

choose and adjust elements within a three-dimensional scene using three.js

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

Passing Object Data from Child to Parent Component in React and Leveraging its Functionality

create a PDF document that contains interactive input fields which can be modified using Angular

Silent response upon click event listener

Is there a way to track the number of visits by a 'user' to a website?

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Calculate the number of rows in a table that contain identical values

Using Vue.js to filter a list based on index matches

The unresponsive sticky navigation bar on a Joomla website is causing issues

Submitting a form with model data using Ajax in Spring Boot with Thymeleaf

Duplicate entries caused by Ajax Form in PHP MySQL database insertion

Transforming Poloniex API Callback JSON into a compatible format for Highcharts.Stockchart

How to Access a PHP Variable Value within jQuery