What are cufon and canvas and how to rewrite them
In my wordpress theme, I had a hover effect on my top menu, but then it suddenly stopped working and I don't know why, so I tried to check the element to see what was going on and also tried to add a css class like this to try return effect:
#navigation li a:hover{color:#b0d719 !important;}
But it doesn't work, then I figured out something in the html ... those cufon and canvas that I don't know what they are and also don't know how to overwrite them in order to accomplish this to bring the hover effect back to the panel again navigation.
Here's a link to the site and here's a preview of the image where this also happens
source to share
Ok after a few tests removing shortcodes and stuff, I just figured it out. I had this code above all these JS scripts and CSS and also in the header
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
// document ready equivalent
$(function(){
// hide
$( "#share-stuff" ).hide();
$( "#clickme" ).click(function() {
$( "#share-stuff" ).slideToggle( "slow", function() {
// Animation complete.
});
});
});
</script>
Then I removed it and the hover effect worked well, so I moved it below all the Js and CSS placed in the header and now it works, but still don't know why it is, nor what is the reason for it, I still wanted to know
source to share
I don't know this library, but I think that removing the following code will solve your problem:
Cufon.replace('#navigation > ul > li > a', {
textShadow: '1px 1px rgba(0, 0, 0, 0.2)',
hover: {
color: linksColor
}
});
There are several other Cufon.replace
calls you can remove.
Also, if you don't want this library, you can remove
<script type='text/javascript' src='http://tv.pulseframe.com/wp-content/themes/trademark/files/js/cufon.js?ver=4.0'></script>
but it can break your scripts script.js
and theme.js
.
source to share