Question

我正在尝试选择图像标记下div内的元素，以便在图像悬停时触发颜色更改。

你能指出我做错了什么，或者它是否可能做到这一点？

img.topic-hover:hover div.post-information ~ p.topic  {
	color: rgb(88, 202, 230);
}

img {
  width: 30px;
  height: 30px;
 }

<img class='topic-hover' src='http://s28.postimg.org/61z157tz1/post1.jpg'>
<div class='post-information'>
  <p class='topic'>Text</p>
</div>

Answer 1

你错误地选择了你的选择器：img.topic-hover:hover + div.post-information p.topic或img.topic-hover:hover ~ div.post-information p.topic会起作用

＆＃13;

img.topic-hover:hover + div.post-information  p.topic  {
	color: rgb(88, 202, 230);
}

img {
  width: 30px;
  height: 30px;
 }

＆＃13;

<img class='topic-hover' src='http://s28.postimg.org/61z157tz1/post1.jpg'>
<div class='post-information'>
  <p class='topic'>Text</p>
</div>

＆＃13;

Answer 2

您需要使用CSS（+）中的下一个选择器。

＆＃13;

img.topic-hover:hover + div>.topic{  	
  color: red;
}

    img {
      width: 30px;
      height: 30px;
     }

＆＃13;

<img class='topic-hover' src='http://s28.postimg.org/61z157tz1/post1.jpg' />

<div class='post-information'>

  <p class='topic'>Text</p>
  
</div>

＆＃13;

<强>解释

您不能在元素中包含任何元素，例如img或输入，需要将其写为自闭元素。

<img src="something.jpg" alt="img"/>
/** not like this**/
<img src="something.jpg" alt="img"></img>

因此，您需要使用下一个选择器。

Answer 3

您需要移动~

＆＃13;

img.topic-hover:hover ~ div.post-information p.topic  {
	color: rgb(88, 202, 230);
}

img {
  width: 30px;
  height: 30px;
 }

＆＃13;

<img class='topic-hover' src='http://s28.postimg.org/61z157tz1/post1.jpg'>
<div class='post-information'>
  <p class='topic'>Text</p>
</div>

＆＃13;

更改图像悬停时的颜色文本（文本位于图像ex下的div中：img＆gt; div：p）

3 个答案: