Javascript: a elements inside div: highlight height when hover

Question

I have a custom navbar that looks like this:

:root {
  --navbar-background-color: #ff1a1a;
  --navbar-text-color: var(--header-text-color) !important;
  --navbar-height: 23px;
  --navbar-top: 40px;
  --navbar-font-size:
}

#custom-navbar {
  overflow: hidden;
  background-color: var(--navbar-background-color);
  height: var(--navbar-height);
  top: var(--navbar-top);
  right: 0;
  left: 0;
  position: fixed;
  overflow-y: hidden;
  z-index: 1;
  padding-right: 50px;
  padding-top: 3px;
  display: inline;
  text-align: right;
}

#custom-navbar p {
  color: var(--navbar-text-color);
  display: inline;
  padding: 10px;
  font-size: var(--navbar-font-size);
  text-decorations: none;
  height: 100% !important;
}

#custom-navbar a:hover {
  background-color: grey;
}

<div id="custom-navbar">
  <a href="#">
    <p>LINK 1</p>
  </a>
  <a href="#">
    <p>LINK 2</p>
  </a>
  <a href="#">
    <p>LINK 3</p>
  </a>
  <a href="#">
    <p>LINK 4</p>
  </a>
</div>

When I hover a mouse over one of the navbar's link, the link gets highlighted in grey. However, there's still some navbar initial color visible: the highlight color doesn't cover all the navbar height.

jsfiddle: https://jsfiddle.net/rafn51sk/3/

How do I fix it? I tried setting height: 100% to navbar's p element, but it didn't work.

score 1 · Answer 1 · answered Nov 04 '18 at 16:51

Don't use P inside A, it is a bad thing look this working example

HTML:

<div id="custom-navbar">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>
</div>

CSS:

:root  {
    --navbar-background-color: #ff1a1a;

    --navbar-text-color: var(--header-text-color) !important;
    --navbar-height: 23px;
    --navbar-top: 40px;
    --navbar-font-size:

}

#custom-navbar {
    overflow: hidden;
    background-color: var(--navbar-background-color);

    height: var(--navbar-height);

    top: var(--navbar-top);
    right: 0;
    left: 0;
    position: fixed;
    overflow-y: hidden;
    z-index: 1;

    padding-right: 50px;
    padding-top: 3px;
    display: inline;
    text-align: right;

}


#custom-navbar a  {
    color: var(--navbar-text-color);
    display: inline;
    padding: 10px;
    font-size: var(--navbar-font-size);
    text-decoration: none;

    height: 100% !important;
}

#custom-navbar a:hover  {
    background-color: grey;
}

score 1 · Answer 2 · answered Nov 04 '18 at 16:55

1

Give the a tags

display: inline-block;

after that the height: 100%; will work. (inline element don't have any height, inline-block have height. You also need to cancel the padding in the navbar div.

answered Nov 04 '18 at 16:55

elad frizi

655
4
9

Thanks for the answer. I accepted the more detailed answer for the work they put in, put your answer really helped - as a tl;dr version - to get a quick idea of the minimal necessary edits. – parsecer Nov 04 '18 at 19:14

Elharony · Accepted Answer · 2018-11-04T23:58:46.493

1

~~This is a common side-effect when using the position: fixed to your Navbar, try removing it, and you will find that when hovering on the <a> it fills the Vertical Height of the Navbar~~ - Thanks to Temani Afif for correcting me out, it was a wrong information - Actually, position: fixed and position: absolute only affects its element, not its child nodes!

The Solution

You need to add those few CSS Properties to your <a> tags:

display: inline-block;
height: 100%;

Further Edits

Remove the padding-top: 3px from your Navbar
Remove the inner <p> tags, they are useless and make it hard for you to work with your code/style it!
Remove the useless display: inline; from your #custom-navbar - The position: fixed eliminates the display property!
You can add something like margin: 0 5px to keep a space between the links! (I already added it below!)

So, the Full Code looks like this now:

:root {
  --navbar-background-color: #ff1a1a;
  --navbar-text-color: var(--header-text-color) !important;
  --navbar-height: 23px;
  --navbar-top: 40px;
  --navbar-font-size:
}

#custom-navbar {
  overflow: hidden;
  background-color: var(--navbar-background-color);
  height: var(--navbar-height);
  top: var(--navbar-top);
  right: 0;
  left: 0;
  position: fixed;
  overflow-y: hidden;
  z-index: 1;
  padding-right: 50px;
  text-align: right;
}

#custom-navbar a {
  display: inline-block;
  margin: 0 5px;
  height: 100%;
}

#custom-navbar a:hover {
  background-color: grey;
}

<div id="custom-navbar">
  <a href="#">LINK 1</a>
  <a href="#">LINK 2</a>
  <a href="#">LINK 3</a>
  <a href="#">LINK 4</a>
</div>

edited Nov 04 '18 at 23:58

answered Nov 04 '18 at 17:07

Elharony

886
8
18

1

don't understand why position:fixed is the culprit here? it's has nothing to do with position:fixed – Temani Afif Nov 04 '18 at 19:40
Great question @TemaniAfif, the problem with `position: fixed` is that it allows its element to get out of the `Default Flow` of the rendering, so the inner elements don't recognize where to stay, that's why we face this unexpected behavior... Also, `position: absolute` has the same effect on its element & its children! – Elharony Nov 04 '18 at 23:26
sorry but you said is false ... position:fixed has no effect on the child/inner element, it only affect the main element ... so with or without position:fixed the issue is still the same – Temani Afif Nov 04 '18 at 23:28
I don't think so! In this question, if we've deleted `position: fixed` our problem will be solved here. – Elharony Nov 04 '18 at 23:31
if you delete `position:fixed` you create another problem due to `display:inline` because position:fixed make the element to be a block element so display is ignored ... remove display:inline and you will see the same result with and without position:fixed – Temani Afif Nov 04 '18 at 23:36
and the issue related to display:inline is that the height will not be considered since it's an inline element so the content will define the height ... that's why you think it's fixed but it's not – Temani Afif Nov 04 '18 at 23:37
Do you mean `display: inline` for the `#custom-navbar`? As I am a bit confused now – Elharony Nov 04 '18 at 23:40
yes that display:inline – Temani Afif Nov 04 '18 at 23:41
`display: inline` for `#custom-navbar` is useless anyway as `position: fixed` eliminates it, so I guess you mean the `display: inline` for its children to become `display: inline-block` instead as I mentioned above... Overall, as you mentioned that `position: fixed` and/or `position: absolute` doesn't affect its child notes, that false information was stuck in my head for some reasons. *Thanks for pointing this out, I've edited/corrected my answer!* – Elharony Nov 05 '18 at 00:03
it's useless because position:fixed force the display to be block BUT if you remove position:fixed it will be considered and this is what confused you. You thought removing position:fixed fixed the issue but removing position:fixed made the display:inline to be considered. Then an inline element cannot have height thus its height is defined by its content. – Temani Afif Nov 05 '18 at 08:00
@TemaniAfif Oh okay, I got it now - I was thinking in a totally different direction... Thanks! – Elharony Nov 06 '18 at 01:58

Javascript: a elements inside div: highlight height when hover

3 Answers3

The Solution

Further Edits