Failure to :hover

So I wanted to share a curious example of failure with you; an instance where a series of “aha” moments during debugging were each followed by slumped shoulders and an “aww, man.” It happened during the coding of the “Random Quote Generator” that is part of the intermediate projects on freeCodeCamp’s website.

A brief run-down

The project’s goal is to create a website that randomly generates a new quote on the page with each press of a button and gives the user an option to tweet out that quote from an anchor link. Not super difficult.

I chose to avoid using any pre-formatted CSS libraries like Bootstrap because I wanted practice styling elements on the page by hand. My page would change font and background colors with each press of the button with a little fade-like animation attached to the color changes (check it out).

The problem

I had this page set up so that the main button’s background and font would swap colors when the mouse hovered over the button; a pretty standard pseudo-selector :hover effect. On page load, it worked fine (the default CSS had the hover element properly selected and styled). The moment the button was clicked, however, the hover effect no longer worked.

Now, anyone who’s tried to adjust a CSS :hover pseudo-selector using JavaScript/jQuery knows that it can’t really be done directly. I learned this the hard way. I initially thought, oh, I’ll just do this:

$(‘.btn a:hover’).css([insert CSS]);

I was wrong. I learned that the :hover pseudo-selector isn’t accessible to jQuery in this way. My next “aha!” was this:

$(‘.btn a’).hover(function(){$this.css([insert CSS]}, function(){$(this).css([insert CSS]});

This is a built-in function that allows you to set the CSS changes that occur when the “mouseenter” and “mouseleave” effects are triggered (the first and second functions, respectively). No luck. For whatever reason, this did nothing. I figured it had to do with how I was selecting the element. I tried a few other selector configurations. Still no luck.

The next possible solution I came across was to adjust the HTML with new JavaScript tags (i.e. ‘onmouseover’). This took a bit of Googling and documentation reading to implement properly, but I got it up and was super excited to see if it worked.

Nothing. It didn’t work. I have no idea why and have since erased my code so I have already forgotten what I even did (probably worth trying this one again as I feel like it might be my best option).

My next “aha!” was to target something besides the pseudo-selector. I created a .root class in my CSS and set variables within it that would be used to change the colors throughout the document. This was my ideal solution because it would allow me to really shorten the amount of JS and CSS used in the app. The problem is, any change to the root variables from the jQuery .css function wouldn’t get applied throughout the document for some reason. I still don’t know why, though I assume it has to do with variable scope.

This is where my big frustration with JavaScript/jQuery/CSS/PostCSS comes in. Using the PostCSS simple-vars plugin, I am able to add variables to the global scope of my CSS document, but I have no way of changing those variables from JS/jQ. I can’t seem to find documentation about how I could do this. When selecting an element whose CSS you want changed using JS/jQ, you have to first select the element. But if variables exist in global scope within the PostCSS main file, I don’t see a way to access them with JS/jQ (Comment a solution if you know otherwise).


Thus concludes my example of failure. In the end, I submitted my project to fCC without the hover effect on my button element. I’m still searching for a solution to this and occasionally return to this project to test out new theories.

Has anyone else encountered this? I’m very curious about how we can adjust a hover effect when a button is pressed that changes the CSS of an element (removing the existing CSS). Or, more importantly for me, how can we select global variables within a main PostCSS file (using postcss-simple-vars) using JS/jQ for style adjustments at the global level?

Check out the project yourself to see what I’m talking about and to experiment around with the code. I’ve added a big comment section in the JavaScript editor around where I tried to include this effect. Happy hunting!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s