Скрытый текст Div появляется снова?

Question

Может ли кто-нибудь помочь мне понять, почему после того, как вы наведете курсор на div, который говорит 'HEADER TEXT', текст снова появляется под парящим DIV?

Рассматриваемые div: #headerctgunnar, #headerchovergunnar и #headercgunnar ... Сначала у меня были только #headercgunnard и #hoverchovergunnar, но я добавил новый div, чтобы посмотреть, поможет ли наличие div между тем, в котором есть «HEADER TEXT», и тем, который появляется при наведении курсора. , чего не произошло.

.bgcgunnar {
  width: 400px;
  height: 500px;
  background: transparent url(https://i.imgur.com/ujKvskd.png) no-repeat;
  background-position: left;
}

#headercgunnar {
  width: 384px;
  height: 100px;
  background: transparent url(https://i.imgur.com/xfNL6tD.png) repeat;
}

#headerctgunnar {
  width: 244px;
  height: 40px;
  padding: 30px 120px 30px 20px;
  background: #aaa;
  background-position: left;
  font-family: 'Oswald', serif;
  text-transform: uppercase;
  font-size: 36px;
  color: #fff;
  line-height: 100%;
  letter-spacing: -1px;
  text-align: left;
  float: left;
}

#headerctgunnar u {
  border-bottom: solid 2px #C6D5D0;
  text-decoration: none;
}

#headerchovergunnar {
  width: 244px;
  height: 40px;
  padding: 30px 120px 30px 20px;
  background: rgba(198, 213, 208, 1);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #aaa;
  letter-spacing: .5px;
  line-height: 120%;
  opacity: 0;
  transition-duration: 1s;
  margin-top: -66px;
  margin-left: -20px;
}

#headerchovergunnar b {
  font-weight: bold;
  color: #000;
}

#headercgunnar:hover #headerchovergunnar {
  opacity: 1;
}

#headerchovergunnar a:link,
#headerchovergunnar a:active,
#headerchovergunnar a:visited {
  color: #fff;
  transition: 1s;
  text-decoration: none !important;
}

#headerchovergunnar a:hover {
  color: #C6D5D0 !important;
  text-decoration: none;
}

.polygoncgunner {
  width: 150px;
  height: 500px;
  clip-path: polygon(43% 0, 100% 0, 100% 100%, 57% 100%, 0 20%);
  background: #ccc url(https://pbs.twimg.com/media/DAnzyp3WsAEU0tq.jpg);
  background-size: cover;
  background-position: center;
  margin-top: -100px;
  float: right;
}

.textccgunnar {
  width: 230px;
  height: 380px;
  padding: 10px;
  background: #fff;
  float: left;
}

.textcgunnar {
  width: 220px;
  height: 380px;
  padding: 0px 10px 0px 0px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #000;
  line-height: 120%;
  letter-spacing: .5px;
  float: left;
  text-align: justify;
  overflow: auto;
  background: #fff;
}

.textcgunnar p::first-letter {
  font-family: 'Oswald', sans-serif;
  font-size: 36px;
  color: #C6D5D0;
  float: left;
  display: block;
  padding: 10px 5px 5px 5px;
}

.textcgunnar b {
  font-weight: bold;
  color: #9DB7AE;
}

.textcgunnar::-webkit-scrollbar {
  background: #fff;
  width: 5px;
}

.textcgunnar::-webkit-scrollbar-thumb {
  background: #C6D5D0;
  width: 5px;
}

.textcgunnar::-webkit-scrollbar-corner {
  background: #C6D5D0;
}

<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700|Nixie+One|Oswald&display=swap" rel="stylesheet">

<div class="bgcgunnar">
  <div id="headerctgunnar">
    <u>header text</u>
    <div id="headercgunnar">
      <div id="headerchovergunnar">
        <b>Tag:</b> <a href="">Words</a><br>
        <b>Notes:</b> Words<br>
        <b>Outfit:</b> <a href="">Click here!</a>
      </div>
    </div>
  </div>
  <div class="polygoncgunner">
  </div>
  <div class="textccgunnar">
    <div class="textcgunnar">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia elementum ante, in imperdiet magna tincidunt sit amet. Sed felis lorem, pretium ut bibendum non, consectetur ac nulla. In posuere ipsum at ligula tristique, id sollicitudin
        nunc imperdiet. Pellentesque eu tortor sit amet neque hendrerit posuere vitae et est. Etiam sit amet leo et urna dictum porta nec quis risus. Integer nec aliquet sapien. Etiam non purus tincidunt, feugiat ipsum id, fermentum turpis. Morbi blandit
        dapibus viverra. Fusce pharetra tincidunt elit eget dictum. In mattis turpis sed dictum consequat. Donec dolor orci, tristique nec tristique non, accumsan non est.</p>

      <p>Aliquam sem tortor, fringilla nec libero at, bibendum tincidunt sapien. Phasellus porta molestie augue, nec lacinia metus interdum non. Suspendisse finibus elit sed tortor ornare, a gravida magna tristique. Vivamus eu viverra arcu, id dapibus sapien.
        Suspendisse quis volutpat massa, non pellentesque lacus. Etiam semper bibendum ornare. Donec cursus odio eu rutrum ultrices.</p>

      <p>Quisque quis risus elementum, hendrerit eros eget, rhoncus mi. Mauris tempus, quam ac mattis faucibus, purus eros elementum ipsum, ut volutpat elit ipsum ac justo. Quisque id faucibus justo. In id est fringilla, congue eros eget, dapibus eros. Maecenas
        dignissim enim nec arcu mattis molestie. Quisque ultricies dictum mi vel fermentum. Praesent blandit tincidunt magna in interdum. Morbi suscipit consectetur est, nec semper massa ornare sed. Donec commodo ut augue quis fermentum. Suspendisse non
        finibus risus, sit amet suscipit purus. Phasellus consectetur quis quam vel congue. Nunc et mattis mauris. Nullam ut tempus diam. Sed gravida tincidunt pretium.</p>
    </div>
  </div>
</div>

Answer 1

Я не совсем уверен, что все происходит с каждым слоем - похоже, может быть что-то странное с z-index s? Кажется, что текст снова отображается только после того, как opacity достигает 1, что означает, что какой-то другой элемент, который он ретранслировал для состояния hover, может быть скрыт.

Однако я думаю, что это вы можете исправить это, просто добавив явное изменение непрозрачности к элементу <u>.

#headerctgunnar:hover u {
  opacity:0;
}