在文本下方懸停時文本顏色發生變化

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>