Css code not working in my site
Question
I have found the following code here in 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>
And if I try it at http://www.cssdesk.com it works as expected but not in my wordpress site. If I put exactly the same code in one of my post within the HTML tab in the wordpress content then the effect does not work.
Could you tell me why it is working in http://www.cssdesk.com but not in my website?
3 answers
solution1
0 2018-06-19 20:46:54
In your html file include the following link tag below:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
solution2
0 ACCPTED 2018-06-19 20:49:17
@vitinx.
Sometimes, you need to specify "!important" for styles that can potentially conflict with other styles happening on the site. Especially for Wordpress sites, where hundreds if not thousands of styles are running at the same time. Try putting "Important" after each style like this:
img.button:hover ~ p.text {
color: rgb(88, 202, 230) !important;
}
p {
font-weight: 300 !important;
transition: color 1s ease !important;
}
Or, perhaps use JQuery for the hover effect. I wrote this little bit of code, and it can replace the CSS code you have for the blue hover effect:
$('img.button').mouseenter(function() {
$( "p.text" ).css("color","rgb(88, 202, 230)");
});
solution3
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>
The
with image inside it prevents sibling selector from working see example, fix is to remove the
wrapping the in html, or change css but html change seems easiest, so I hope you can do that?:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.