hover over div updates display in spots or intermittently-CodePudding

I’m attempting to implement a hover to display effect for a header. I’ve assigned the :hover selector to a div with width 99% and height 10vh that should be contiguous with the header. The display on hover executes consistently when I hover over the center of the div, intermittently when I hover over the right side of the div and never when I hover over the left side of the div. I added a border to make the boundaries of the :hover div visible.

Shouldn’t hover be active when I hover anywhere over the div?

What am I doing wrong with this set up?

https://codepen.io/ripmurdock/pen/RwjyoqB?editors=1000

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.cc_vert_c1-1 {
  width: 5vw;
  height: 83vh;
  left: 2vw;
  top: 16vh;
  position: absolute;
  overflow: hidden;
}

.cc_hdr_cl-1 {
  position: absolute;
  height: 10vh;
  border-style: dotted;
  border-color: white;
  display: none;
}

.cc_hover {
  position: absolute;
  height: 10vh;
  width: 99%;
  border-style: dotted;
  border-color: white;
}

.cc_hover:hover #cc_hdr-1 {
  display: block;
}

.cc_hdr_logo_cl-1 {
  width: 40vw;
  max-height: 99.5vh;
  padding-left: 2vw;
  padding-top: 3vh;
}

.cc_horiz_c1-1 {
  width: 48.3vw;
  height: 10vh;
  left: 50vw;
  top: 3vh;
  position: absolute;
}

<div >
  <svg width="100" height="100vh">
    <rect width="100" height="100vh" fill="#fff" />
  </svg>
</div>

<div ></div>

<div  id="cc_hdr-1">
  <svg >
            <rect width="100" height="7vh" fill="#fff" />
    </svg>

  <svg >
      <rect width="600" height="7vh" fill="#fff" />
    </svg>
</div>

CodePudding user response：

Your hover rule sets the display property for the sibling element, which lays it over the original element. This, then, interrupts the hover event on the original element. If the sibling element was a child element it would all still work, since the hover event would propagate. See here.

Note that this has the potentially undesirable effect of increasing the size of the hover area, since the parent element gets stretched by the child.

I don't have a more specific solution since I don't know your goals.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.cc_vert_c1-1 {
  width: 5vw;
  height: 83vh;
  left: 2vw;
  top: 16vh;
  position: absolute;
  overflow: hidden;
}

.cc_hdr_cl-1 {
  position: absolute;
  height: 10vh;
  border-style: dotted;
  border-color: white;
  display: none;
}

.cc_hover {
  position: absolute;
  height: 10vh;
  width: 99%;
  border-style: dotted;
  border-color: white;
}

.cc_hover:hover #cc_hdr-1 {
  display: block;
  background: pink;
}

.cc_hdr_logo_cl-1 {
  width: 40vw;
  max-height: 99.5vh;
  padding-left: 2vw;
  padding-top: 3vh;
}

.cc_horiz_c1-1 {
  width: 48.3vw;
  height: 10vh;
  left: 50vw;
  top: 3vh;
  position: absolute;
}

<div >
  <svg width="100" height="100vh">
    <rect width="100" height="100vh" fill="#fff" />
  </svg>
</div>

<div >
  <div  id="cc_hdr-1">
    <svg >
            <rect width="100" height="7vh" fill="#fff" />
    </svg>

    <svg >
      <rect width="600" height="7vh" fill="#fff" />
    </svg>
  </div>
</div>