更改图像悬停

Question

感谢好人，我今天发现当你以这种方式盘旋div时，可能会改变文字的颜色：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

稍后我试图在图像上实现这种功能，但结果没有实现，请你解释一下做错了什么，也许是案例之间的区别。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用+ CSS选择器：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加〜

 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

在CSS选择器中，空格意​​味着＆＃34;是＆＃34;的子项，因此选择器工作的方式表示当带有类＆＃34;按钮＆＃34;的img标签时悬停在上面，选择带有类文本的子p标签并更改颜色。

而是使用相邻的兄弟选择器（+）来表示它是兄弟而不是孩子

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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