Question

我制作了两个蓝色的盒子并且有白色文字颜色，当你将它们悬停在它们上面时，文字颜色从白色变为蓝色，盒子颜色从蓝色变为白色。那部分有效。但当我将鼠标悬停在框中的文本下方时，文本颜色会变回蓝色，即使我仍然将鼠标放在框“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规则。悬停在文本上的行为与书面形式相同 - 只有当您直接悬停在文本上时才会激活。

要解决此问题，我从color:元素中删除了.button-title-text属性，允许它继承.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>

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

1 个答案: