更改图像悬停时的文本颜色 [英] Change text color on image hover

问题描述

感谢伟大的人，我今天发现了当您以这种方式悬停 div 时可以改变文本颜色的可能性:

div.button:hover span {颜色:RGB(88、202、230)；}

 
<div class='svg bookmarks'></div><span class=''>书签</span>

稍后我尝试在图像之上实现这种功能，但没有实现，请您解释一下做错了什么，也许情况之间的区别.

 img.button:hover p.text {颜色:RGB(88、202、230)；}p{字体粗细:300；过渡:颜色1s缓和；}

 <p class='text'>个人资料</p>

解决方案

尝试添加 ~

 img.button:hover ~ p.text {颜色:RGB(88、202、230)；}p{字体粗细:300；过渡:颜色1s缓和；}

 <p class='text'>个人资料</p>

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>

解决方案

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>

这篇关于更改图像悬停时的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！