更改文本顏色懸停

感謝偉大的傢伙，我發現改變文本的顏色的可能性，今天，當你以這種方式盤旋的div：更改文本顏色懸停

div.button:hover span { 
 
    color: rgb(88, 202, 230); 
 
}

<div class='button'> 
 
    <div class='svg bookmarks'></div> 
 
    <span class=''>Bookmarks</span> 
 
    </div>

而且一稍後，我試圖在圖像上實現這種功能，但結果並未實現，請您解釋什麼是錯誤的，也許是案例之間的差異。

img.button:hover p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

2016-01-20 Adrian

嘗試添加〜

img.button:hover ~ p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

2016-01-20 22:19:57 Maometto

使用+ CSS選擇器：

img.button:hover + p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

2016-01-20 22:18:52

你的選擇是錯誤的，因爲那款不是圖像的一個孩子。使用通用容器會修：

.c:hover p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<div class="c"> 
 
    <img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p> 
 
</div>

2016-01-20 22:19:31 Shomz

謝謝你的建議:)所以，如果我深知這種方法只能應用於子元素？ – Adrian

不客氣。它以前只能用於子元素，但現在在CSS3中，我們也可以爲兄弟元素完成它。使用'+'選擇器查看其他答案。 – Shomz

現在我明白了。謝謝你的解釋，祝你有美好的一天！ – Adrian

在CSS選擇器，空間均值「是一個孩子「，所以你的選擇器工作的方式表示，當一個帶有」按鈕「類的img標籤被懸停時，選擇子p用類文本標記並更改顏色。

而是使用相鄰兄弟選擇器（+）說，這是兄弟姐妹，而不是一個孩子

img.button:hover + p.text { 
 
    color: rgb(88, 202, 230); 
 
} 
 

 
p { 
 
    font-weight: 300; 
 
    transition: color 1s ease; 
 
}

<img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'> 
 
    <p class='text'>Profile</p>

2016-01-20 22:23:05

回答