Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Build a WordPress Plugin Building WordPress Widgets, and Shortcodes Adding Custom Styles to Plugin Front End

Michael Hanna
Michael Hanna
17,649 Points

Hover styling no longer works after removing temporary css

When I remove the temporary styling from front-end.php (just three rules we had at the top of the file), the hover functionality goes away. The new CSS file is more complicated, so I haven't been able to determine which rule or rules is missing. Almost all of this code is cut and paste from the project download files, so I'd be surprised if the error is in there (otherwise people would have asked about it). That being said, I've double checked to make sure I've cut and pasted correctly, and I have. Any ideas?

Amy Burrows
Amy Burrows
11,362 Points

I had the same problem so I added a display value of "block" to the hovered list element in the new main css file (.wptreehouse-badges li:hover .wptreehouse-badge-info). That works. It's just missing, I think.

2 Answers

Amy Burrows
Amy Burrows
11,362 Points

I had the same problem so I added a display value of "block" to the hovered list element in the new main css file (.wptreehouse-badges li:hover .wptreehouse-badge-info). That works. It's just missing, I think.

Amy Burrows
Amy Burrows
11,362 Points

Sorry! I'd like to back out of my earlier answer and say that the hover effect is actually in the jquery, not the css. So most likely the problem has to do with the way the .js file is linked. I had a mistake in my wp_enqueue_script function and it caused other problems later.

Adding display block like Amy suggested, does seem to work, it's doesn't work the way it's supposed to but it works. The transition is missing. However, it doesn't actually fix the problem. My console is telling me that jQuery is not defined.