时间戳

首页 > 解决方案 > Css 代码在我的网站中不起作用

css - Css 代码在我的网站中不起作用

问题描述

我在stackoverflow中找到了以下代码（更改图像悬停时的文本颜色）

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

p {
font-weight: 300;
transition: color 1s ease;
}
<img class='button' src='//placehold.it/100?text=avatar' />
<p class='text'>Profile</p>

如果我在http://www.cssdesk.com上尝试它，它会按预期工作，但在我的 wordpress 网站中却不行。如果我在 wordpress 内容的 HTML 选项卡中的一篇文章中放入完全相同的代码，则效果不起作用。

你能告诉我为什么它在http://www.cssdesk.com上工作，但在我的网站上却不行吗？

标签： cssimagehover

解决方案

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

p {
font-weight: 300;
transition: color 1s ease;
}
<div class="awr-i">
<style>
img.button:hover ~ p.text {
  color: rgb(88, 202, 230);
}</p>
<p>p {
  font-weight: 300;
  transition: color 1s ease;
}
</style>
 <p>
  <br>
  <img class="button" src="https://www.thetravelerlens.com/wp-content/uploads/2018/06/Distancia-Hiperfocal-cabecera.jpg">
 </p>
 <p class="text">Profile</p>
 <p></p>
 <span id="tve_leads_end_content" style="display: block; visibility: hidden; border: 1px solid transparent;"></span><span class="tve-leads-two-step-trigger tl-2step-trigger-62019" style="display: none;"></span><span class="tve-leads-two-step-trigger tl-2step-trigger-62019" style="display: none;">  </span> 
</div>

这

里面有图像防止兄弟选择器工作参见示例，修复是删除

包装 in html，或更改 css，但 html 更改似乎最简单，所以我希望你能做到这一点？：

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

p {
font-weight: 300;
transition: color 1s ease;
}
<div class="awr-i">
<style>
img.button:hover ~ p.text {
  color: rgb(88, 202, 230);
}</p>
<p>p {
  font-weight: 300;
  transition: color 1s ease;
}
</style>
<!--WRAPPING P TAG REMOVED -->
 <br>
 <img class="button" src="https://www.thetravelerlens.com/wp-content/uploads/2018/06/Distancia-Hiperfocal-cabecera.jpg">

 <p class="text">Profile</p>
 <p></p>
 <span id="tve_leads_end_content" style="display: block; visibility: hidden; border: 1px solid transparent;"></span><span class="tve-leads-two-step-trigger tl-2step-trigger-62019" style="display: none;"></span><span class="tve-leads-two-step-trigger tl-2step-trigger-62019" style="display: none;">  </span> 
</div>

推荐阅读