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
jrabello
17,917 PointsGetting All onMouseOver Events
I've been trying to understand why events were "created" in a way is so difficult to track it's handlers?
I mean, well, for debugging purposes this is terrible, I'm brand new at web development but this is something that REALLY were supposed to be changed, when some event happens, It should be clear to the programmer where it is handled, for example:
I found that treehouse "ask a question" button quite awesome, so I looked at the source code to understand how It were made, and I've seen It's an anchor, and I just thought: "wow nice anchor, they've changed the anchor look with css and when the mouse is over the anchor the color is changed with a javascript event or the css hover selector", but AGAIN it becomes an AWFUL task to search for event handlers, ok we have chrome event listeners, but It's still a pain to search for it, so I have two questions:
1 - Where is the css selector or js callback responsible for changing "ask a question" color when onMouseOver event is triggered?
2 - Why is always difficult to search for such handlers? Isn't there any code, plugin, or something that makes this task a litlle bit easier?
2 Answers
Ryan Field
Courses Plus Student 21,242 PointsThe hover state colour change for the 'Ask a Question' button on Treehouse isn't being tracked or handled by JavaScript. Rather, it is done through CSS using the :hover pseudo selector that triggers the colour change when the mouse is hovered over it. Something like this:
.button {
border: 2px solid #5fcf80;
color: #5fcf80;
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}
.button:hover {
border-color: #34ad58;
color: #34ad58;
}
The soft transition is handled through the CSS transition property, as seen above.
If you open the Chrome developer's panel (by right clicking an element and selecting "Inspect element" or by pushing F12, at least on Windows), you can see all the properties that have been declared for that element. You can also 'trigger' the hover state and see which ones change. It's a really handy tool that is really essential to developing websites, at least in my opinion.
jrabello
17,917 PointsThank you Ryan,
I think I'll start developing a JS to make our life a litlle bit easier when searching for event handlers :)
jrabello
17,917 Pointsjrabello
17,917 PointsHello Ryan,
Thanks for the answer, I'm unable to find the hover selector using chrome' inspect element, can you help me with this? Any idea about how can I find JS handler callbacks easier?
Thanks
Ryan Field
Courses Plus Student 21,242 PointsRyan Field
Courses Plus Student 21,242 PointsI've explained it here in these images (there are two). The first describes how to inspect the element, and the second shows that the element has a
:hoverpseudo selector attached to it that changes its colour.As for finding JS handlers and callback functions, that's a bit harder. You can attempt to download their JavaScript files and go through the code, but sometimes people will minify it, which makes it really, really difficult to see what's supposed to do what.
A lot of going through other people's code without having them around to ask questions comes down to trial and error and intuition. I figured that the "Ask a Question" button animation would probably be done through CSS, so that's the first place I looked. That being said, people tend to do things the simplest way they can/know, so it's usually best to start off looking where something would be the easiest to implement, and then working your way up to more complex methods.