更改图像悬停时的文本颜色

Question

Thanks to great guy I've discovered today possibility of changing color of the text when you hover of the div in that way:

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

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

And a bit later I've tried to implement that kind of functionality on top of the image, but the result is not achieved, can you please explain what is done wrong and maybe the difference between cases.

  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> 

Answer 1

Use + CSS selector:

  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> 

Answer 2

try adding ~

  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> 

Answer 3

In a CSS selector, a space mean "is a child of", so the way your selector is working says when an img tag with class "button" is hovered over, select the child p tag with class text and change the color.

Instead use the adjacent sibling selector (+) to say that it is a sibling and not a child

  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> 

Answer 4

Your selector is wrong because that paragraph is not a child of the image. Using a common container would fix it:

 .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>