CODEWITHSUNDEEP
htmlcsshover
Elex XVII
Elex XVII

Reputation: 15

Can someone tell me why the a:hover doesn't work?

The :hover doesn't work and I don't know why.

You should know that I have reduced my original code to these few lines. But each of them is useful like the "content" div.

If I delete width:100%; or position:fixed; it works, but I don't know why (I can't remove those lines because I use them in the original web site)

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

a {
  width: 100%;
}

a:hover {
  font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>

Upvotes: 1

Views: 85

Answers (3)

Fisharp
Fisharp

Reputation: 654

Just move your anchor to be rendered after your fixed div, and set your anchor to have position: absolute so it can be rendered upon the div

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

a {
  position: absolute;
  width: 100%;
}

a:hover {
  font-size: 23pt;
}
<div id="content">
</div>
<a>HOME</a>

Working with multiple possitive z-indexes (which also seems to solve that issue at first time) is a bit tricky when setting z-indexes to multiple elements, and can lead you to undesired situations once you start adding more and more elements to your dom, and will be forced to set specific z-indexes for every new element (taking care to change everytime the z-index number to avoid new "overlapping-element" situations

Upvotes: 0

GBWDev
GBWDev

Reputation: 596

The #content div is taken out of the normal DOM painting flow due to position:fixed and becomes positioned on top of the anchor tag.

An easy way to solve this is to set a negative z-index on content.

#content {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index:-1;
}

a {
  width: 100%;

}

a:hover {
  font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>

Upvotes: 5

Justinas
Justinas

Reputation: 43481

It's because fixed element is above your <a>. Put z-index for it.

#content {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 5;
}

a {
    width: 100%;
    position: relative;
    z-index: 6;
}

a:hover {
    font-size: 23pt;
}
<a>HOME</a>
<div id="content">
</div>

Upvotes: 3

Related Questions