CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 51

Text color changing when hovering below text

I've made 2 boxes that are blue and have a white text color, and when you hover over them, the text color changes from white to blue and the box color changes from blue to white. That part works. But when I hover below the text from the box, the text color changes back to blue even though I'm still with my mouse on the box 'href'.

Have a look at my code:

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>

Any help would be appreciated. Thanks in advance.

Upvotes: 1

Views: 349

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

Consolidated your code and fixed the issue.

You had identical styles for your #galaxy and #test boxes (until they're hovered). I added a class called .box to both of them and moved the styles to that selector.

The issue in your post was occurring because you had a :hover rule on the box itself and the text inside. The hover on the text was behaving as written - it was only activating when you hovered directly over the text.

To fix this, I removed the color: attribute from your .button-title-text element, allowing it to inherit the color from the .box.

Then I added a .box:hover rule that changes the text color, which takes effect when either box is hovered.

Hope this helps!

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>

Upvotes: 1

Related Questions