AndrewMk AndrewMk - 2 months ago 12
HTML Question

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a

position:fixed;
and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.

HTML

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

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

<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{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}


an important thing is:
The container is hidden by Jquery, unless I click a certain button.

$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});


this is an illustrative image have a look

I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem

update
I will try to change the css property "z-index"but only when the the container button is toggled on

so the link will have
z-index:-9;
but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this

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

$("#div-2 a").css("z-index", -9);

var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});


this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to
z-inedx:99;
when the container is toggled off?

Only any other answer for the problem is appreciated.

Answer

It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?

the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.

But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.

  1. It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
    • Solution: Give #div-1 a smaller width.
  2. You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
    • Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.

All details are commented in the source.

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>