更改圖像懸停上的顏色文本（文本位於圖像ex下的div中：img> div：p）

我試圖選擇圖像標記下div內的元素以在圖像獲取時觸發顏色更改徘徊。

你能指點我做錯了什麼，或者甚至可以這樣做嗎？更改圖像懸停上的顏色文本（文本位於圖像ex下的div中：img> div：p）

img.topic-hover:hover div.post-information ~ p.topic { 
 
\t 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>

來源

2016-01-21 Adrian

https://jsfiddle.net/m9wfwceq/ – chinaowl

你miswrite您的選擇：img.topic-hover:hover + div.post-information p.topic或img.topic-hover:hover ~ div.post-information p.topic將工作

img.topic-hover:hover + div.post-information p.topic { 
 
\t 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>

來源

2016-01-21 22:38:46

GCyrillus，謝謝你的建議。它完美的工作！ – Adrian

您需要在CSS中使用的下一個選擇器（+）。

img.topic-hover:hover + div>.topic{ \t 
 
    color: red; 
 
} 
 

 
    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>

說明

您不能像IMG或輸入，這就需要寫成自我封閉的元素的元素中的任何元素。

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

因此，您需要使用下一個選擇器。

來源

2016-01-21 22:38:46

耶穌，謝謝你的提示！祝你有個美好的一天:) – Adrian

你需要移動~

img.topic-hover:hover ~ div.post-information p.topic { 
 
\t 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>

來源

2016-01-21 22:38:47

謝謝，文森特那完美的工作！ :) – Adrian

更改圖像懸停上的顏色文本（文本位於圖像ex下的div中：img> div：p）

回答

相關問題