Css 代码在我的网站中不起作用答案

【问题标题】：Css code not working in my siteCss 代码在我的网站中不起作用
【发布时间】：2018-11-28 20:57:46
【问题描述】：

我在 stackoverflow (Change text color on image hover) 中找到了以下代码

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 中有效，但在我的网站中无效？

【问题讨论】：

根据您的 HTML 代码，它应该可以工作。 :)我正在将您的代码转换为 sn-p 以检查它。
欢迎来到 Stack Overflow，您的代码运行良好。你想展示一个不想展示的地方吗？
@vitinx 您在 wordpress 中的操作不正确。我认为您会复制 CSS 并将其粘贴到侧边栏中的 CSS 选项中？
知道 wordpress 你正在从他们的编辑器中得到一些代码转换
应该有其他 CSS 规则作用于您的元素。检查一下。

标签： css image hover

【解决方案1】：

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>

【讨论】：

【解决方案2】：

@vitinx。

有时，您需要为可能与网站上发生的其他样式发生冲突的样式指定“！important”。特别是对于 Wordpress 网站，数百甚至数千种样式同时运行。尝试像这样在每种样式后加上“重要”：

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

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

或者，也许使用 JQuery 来实现悬停效果。我写了一小段代码，它可以代替你为蓝色悬停效果而编写的 CSS 代码：

$('img.button').mouseenter(function() {
  $( "p.text" ).css("color","rgb(88, 202, 230)");
});

【讨论】：

解决方案主要是这个我的主题。他们在编辑器中“阻止”了某些内容，并告诉我在我的想法中该做什么，以便“自定义”代码可以工作

【解决方案3】：

在您的 html 文件中包含以下链接标记：

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

【讨论】：