CSS代码在我的网站中不起作用
[英]Css code not working in my site
问题描述
我在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上运行而不在我的网站上运行吗？
3 个解决方案
解决方案1
0 2018-06-19 20:46:54
在您的html文件中，在下面包含以下链接标记：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
解决方案2
0 已采纳 2018-06-19 20:49:17
@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
0 2018-06-19 20:54:56
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>
的
内含图片会阻止同级选择器正常工作，请参见示例，解决方法是删除
用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>
CSS（不透明过渡）在我的测试网站上有效，但在实际网站上无效
[英]CSS (opacity transition) working on my test site but not real site
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.