html - 将鼠标悬停在文本下方时文本颜色会发生变化

Question

我制作了 2 个蓝色框和白色文本颜色，当您将鼠标悬停在它们上方时，文本颜色从白色变为蓝色，框颜色从蓝色变为白色。那部分有效。但是，当我将鼠标悬停在框中的文本下方时，即使我的鼠标仍在框“href”上，文本颜色也会变回蓝色。

看看我的代码:

body {
  background: #DCDCDC
}

a {
  text-decoration: none;
}

#galaxy {
  width: 400px;
  height: 300px;
  background-color: rgba(37, 100, 165, 0.80);
  border: 1px solid rgba(37, 100, 165, 0.80);
  margin: 0 auto;
  margin-top: 100px;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

#galaxy:hover {
  background-repeat: no-repeat;
  background-color: #FFF;
}

#test {
  width: 400px;
  height: 300px;
  background-color: rgba(37, 100, 165, 0.80);
  border: 1px solid rgba(37, 100, 165, 0.80);
  margin: 0 auto;
  margin-top: 100px;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

#test:hover {
  background-repeat: no-repeat;
  background-color: #F00;
}

.button-title-text {
  text-align: center;
  color: #FFF;
  font-size: 16px;
  padding-top: 100px;
}

.button-title-text:hover {
  text-align: center;
  color: rgb(37, 100, 165);
  font-size: 16px;
  padding-top: 100px;
}

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <a href="#">
    <div id="galaxy">
      <div class="button-title-text">
        <h1>Galaxy</h1>
      </div>
    </div>
  </a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <a href="#">
    <div id="test">
      <div class="button-title-text">
        <h1>test</h1>
      </div>
    </div>
  </a>
</div>

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

整合您的代码并解决问题。

#galaxy 和 #test 框的样式相同(直到它们悬停)。我向它们添加了一个名为 .box 的类，并将样式移动到该选择器。

您的帖子中出现问题是因为您在框本身和里面的文本上有一个 :hover 规则。悬停在文本上的行为与所写的一样 - 只有当您将悬停直接悬停在文本上时才会激活。

为了解决这个问题，我从 .button-title-text 元素中删除了 color: 属性，允许它从 .box 继承颜色。

然后我添加了一个更改文本颜色的 .box:hover 规则，当任一框悬停时该规则生效。

希望这对您有所帮助!

body {
  background: #DCDCDC
}

a {
  text-decoration: none;
}

.box {
  width: 400px;
  height: 300px;
  background-color: rgba(37, 100, 165, 0.80);
  border: 1px solid rgba(37, 100, 165, 0.80);
  margin: 0 auto;
  margin-top: 100px;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

.button-title-text {
  text-align: center;
  font-size: 16px;
  padding-top: 100px;
}

.box:hover {
  background-color: #FFF;
  color: rgb(37, 100, 165);
}

#test:hover {
  background-color: #F00;
}

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <a href="#">
    <div id="galaxy" class="box">
      <div class="button-title-text">
        <h1>Galaxy</h1>
      </div>
    </div>
  </a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <a href="#">
    <div id="test" class="box">
      <div class="button-title-text">
        <h1>test</h1>
      </div>
    </div>
  </a>
</div>