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.