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

【问题标题】：Change text color on image hover更改图像悬停时的文本颜色
【发布时间】：2016-01-21 06:23:05
【问题描述】：

感谢伟大的家伙，我今天发现当您以这种方式悬停 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>

【问题讨论】：

标签： html css

【解决方案1】：

尝试添加~

 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>

【讨论】：

【解决方案2】：

使用+ 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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的选择器错误，因为该段落不是图像的子级。使用通用容器可以解决它：

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

【讨论】：