Textfarbe ändert sich, wenn ich unter dem Text schwebe

Question

Ich habe zwei blaue Felder mit weißer Textfarbe erstellt. Wenn Sie den Mauszeiger darüber bewegen, ändert sich die Textfarbe von weiß zu blau und die Farbe des Kästchens wechselt von blau zu weiß . Dieser Teil funktioniert. Aber wenn ich unter dem Text aus der Box schwebe, ändert sich die Textfarbe wieder in blau, obwohl ich immer noch mit meiner Maus auf der Box 'href' bin.

Werfen Sie einen Blick auf mein 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>

Jede Hilfe würde geschätzt. Danke im Voraus.

Answer 1

Konsolidieren Sie Ihren Code und beheben Sie das Problem.

Sie hatten identische Stile für Ihre #galaxy und #test Boxen (bis sie schwebte). Ich habe beiden eine Klasse namens .box hinzugefügt und die Stile in diesen Selektor verschoben.

Das Problem in Ihrem Beitrag trat auf, weil Sie eine :hover Regel auf der Box selbst und den Text im Inneren hatten. Der Mauszeiger über den Text verhielt sich wie geschrieben - er wurde nur aktiviert, wenn Sie direkt über dem Text schwebten.

Um dies zu beheben, entfernte ich das color: Attribut von Ihrem .button-title-text Element, so dass es die Farbe von der .box erben kann.

Dann habe ich eine .box:hover Regel hinzugefügt, die die Textfarbe ändert, die wirksam wird, wenn eine der beiden Boxen aktiviert ist.

Hoffe, das hilft!

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>