为什么悬停效果在我的CSS中不起作用?

busg9geu  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(230)

:hover效果不起作用,我不知道为什么。
我对CSS相当陌生,当我自己做一些练习时,我遇到了一个问题。当我将鼠标悬停在#hey元素上时,它的颜色应该会改变,但它不起作用。我想知道是什么原因导致了这个问题,以及如何解决它。为了帮助您更好地理解,我还提供了一个视频演示和我编写的代码。
Here is a GIF link for you to see it better.

body {
  font-family: "Open Sans", sans-serif;
  height: 3000px;
  margin: 0;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  position: relative;
}

.header {
  position: fixed;
  display: flex;
  width: 90%;
  height: 500px;
}

.header div {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}

.header div:nth-of-type(1):hover {
  background-color: transparent !important;
}

.header div:nth-of-type(2):hover {
  background-color: transparent !important;
}

.header div:nth-of-type(3):hover {
  background-color: transparent !important;
}

.header div:nth-of-type(4):hover {
  background-color: transparent !important;
}

.header div:nth-of-type(5):hover {
  background-color: transparent !important;
}

#hey {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hey:hover {
  color: red;
}
<h1>Trying something page</h1>

<section id="container">
  <div id="hey">HEY</div>
  <div class="header">
    <div style="background-color: #80ffdb"></div>
    <div style="background-color: #64dfdf"></div>
    <div style="background-color: #48bfe3"></div>
    <div style="background-color: #5390d9"></div>
    <div style="background-color: #6930c3"></div>
  </div>
</section>
92dk7w1h

92dk7w1h1#

你的问题是你有一个元素坐在你的“嘿”之上。即使你的第三个矩形有一个透明的背景,它仍然在浏览器的眼睛。这意味着,当它看起来像你悬停在“嘿”,你实际上是悬停在你的透明背景和浏览器没有得到的信号,“嘿”是被悬停。
根据你的最终目标是什么,一个解决方案是将他们“嘿”移动到第三个矩形。
替换第三个div的HTML。

<div style="background-color: #48bfe3" class="hey">
    <span class="text">Hey</span>
</div>

CSS可以替换#hey的所有样式。

.hey {
  /* styling the text */
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  text-transform: uppercase;
  /* aligning the text */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hey:hover {
  background-color: transparent;
}
.hey .text {
  display: none;
}
.hey:hover .text {
  display: inline;
}
.hey .text:hover {
  color: red;
}

你可以在this CodePen中看到整个过程。

5fjcxozz

5fjcxozz2#

#hey元素的悬停功能不起作用,因为周围的div上已经有一个活动的悬停。
换句话说,只有将鼠标悬停在周围的div上,才能访问#hey元素。在这一点上,你试图触发一个额外的悬停,浏览器只是忽略。
如果移除div悬停,您将看到#hey悬停工作。

body {
  font-family: "Open Sans", sans-serif;
  height: 3000px;
  margin: 0;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  position: relative;
}

.header {
  position: fixed;
  display: flex;
  width: 90%;
  height: 500px;
}

.header div {
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}

#hey {
  color: white;
  font-family: "Open Sans", sans-serif;
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hey:hover {
  color: red;
}
<h1>Trying something page</h1>

<section id="container">
  <div id="hey">HEY</div>
  <div class="header">
    <div style="background-color: #80ffdb"></div>
    <div style="background-color: #64dfdf"></div>
    <div style="background-color: #48bfe3"></div>
    <div style="background-color: #5390d9"></div>
    <div style="background-color: #6930c3"></div>
  </div>
</section>

如果可以选择,请重新构造HTML。尝试将#hey元素嵌套在div中。

相关问题